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

 

 

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 등
정리 작업 필요할 때	타이머 제거, 리스너 해제 등