React, Vue

useEffect 라이프사이클 개념부터 실전 예제

jonbeo 2025. 12. 31. 10:11
반응형

 

 

React를 처음 배우면서 가장 많이 마주치는 훅 중 하나가 바로 **useEffect**입니다.
하지만 초보자 분들에게는 “언제 실행되는지?”, “언제 멈추는지?” 헷갈리기 쉬운 개념이죠.

이번 포스팅에서는 useEffect의 동작 원리와 사용법,
그리고 클래스 컴포넌트의 라이프사이클 메서드와의 비교까지 알아보겠습니다.

✅ 1. useEffect란?

컴포넌트가 렌더링된 이후 특정 작업(=Effect)을 수행할 수 있도록 하는 React Hook입니다.

 

예:

  • API 호출
  • 이벤트 리스너 등록
  • 타이머 설정
  • 외부 상태 동기화 등

📌 기본 문법

 
useEffect(() => {
  // 실행할 코드
}, [의존성 배열]);

✅ 2. useEffect 실행 시점 정리

의존성 배열 실행 시점
없음 항상 실행 (렌더링마다)
빈 배열 [] 처음 렌더링 시 1번만
값 포함 [count] 해당 값이 바뀔 때마다 실행

예제 1: 매 렌더링마다 실행

 
useEffect(() => {
  console.log("렌더링마다 실행됨");
});

예제 2: 처음 1회만 실행

 
useEffect(() => {
  console.log("처음에만 실행됨");
}, []);

예제 3: 특정 값 변화 시만 실행

 
useEffect(() => {
  console.log("count가 바뀔 때만 실행됨");
}, [count]);

❌ 의존성 배열 빠뜨리면 생기는 문제

  • API 무한 호출
  • 불필요한 렌더링
  • 성능 저하

👉 의존성 배열은 반드시 목적에 맞게 설정해야 합니다!

🔁 useEffect에서 클린업(Cleanup) 하기

컴포넌트가 언마운트될 때 작업을 정리(정리함수) 할 수 있습니다.

 
useEffect(() => {
  const timer = setInterval(() => {
    console.log("반복 실행");
  }, 1000);

  return () => {
    clearInterval(timer);
    console.log("컴포넌트 언마운트 시 정리됨");
  };
}, []);

🔄 클래스 컴포넌트와 비교

클래스 컴포넌트 함수형 useEffect
componentDidMount() useEffect(() => {}, [])
componentDidUpdate() useEffect(() => {}, [value])
componentWillUnmount() return () => {} 내부에 작성

✅ 실전 예제: API 호출

 
import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  return user ? <div>{user.name}</div> : <p>로딩 중...</p>;
}

💡 정리: useEffect는 언제 쓰나요?

사용 목적 예시
컴포넌트 처음 실행 시 작업 초기 데이터 불러오기
특정 값이 변경될 때 필터 적용, 슬라이드 이동 등
외부 이벤트 처리 window resize, scroll 등
정리 작업 필요할 때 타이머 제거, 리스너 해제 등

 

반응형