[React] useEffect

💫 리액트의 라이프 사이클
모든 리액트 컴포넌트는 라이프 사이클(생애 주기)을 가진다.
주요 단계 : Mount → Update → Unmount

• Mount
  • 컴포넌트가 처음으로 DOM에 삽입되는 시점
  • 주로 API 호출, 초기 데이터 로딩 등의 작업 수행
• Update
  • 상태(state)나 props가 변경되어 컴포넌트가 다시 렌더링 되는 시점 (리렌더링)
  • 변경된 값 로깅, DOM 조작 등의 작업 가능
• Unmount
  • 컴포넌트가 DOM에서 제거되는 시점
  • 타이머 해제, 이벤트 리스너 제거 등 리소스 정리 작업 (cleanup)

---

🕹️ useEffect

리액트 컴포넌트에서 사이드 이펙트(부수 효과)를 처리하기 위한 훅

📍 리액트 컴포넌트의 사이드 이펙트란?

컴포넌트의 렌더링 과정 외부에서 발생하는 동작
예시) 데이터 요청, 구독 설정, 타이머 등록, 콘솔 출력 등

import { useEffect, useState } from 'react';

export default function MyComponent() {
  const [count, setCount] = useState(0);

  // ✅ 마운트 시 실행 (최초 한 번)
  useEffect(() => {
    console.log('🔵 Mount');
	
    // ✅ 언마운트 시 실행 (컴포넌트가 DOM에서 제거될 때)
    return () => {
      console.log('🔴 Unmount');
    };
  }, []);

  // ✅ count 값이 변경될 때마다 실행 (업데이트)
  useEffect(() => {
    console.log('🟡 Update: count is', count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

useEffect(() => {}, []);

• useEffect(() => {}) : 사이드 이펙트를 수행할 콜백 함수
• [] : 의존성 배열 (비어 있으면 Mount 시에만 실행)
• return () => {} : cleanup 함수 (Unmount 시 실행)

📍 useEffect로 라이프사이클 제어하기

1️⃣ 마운트 (Mount) : 컴포넌트가 처음 생성될 때

// 컴포넌트가 처음 렌더링 될 때 한 번만 실행
useEffect(() => {
  console.log("🔵 Mount");
}, []);

• 의존성 배열이 빈 경우 ([]) : 컴포넌트가 처음 렌더링 될 때 한 번만 실행

2️⃣ 업데이트 (Update) : 상태나 props가 변경될 때

// (1)
useEffect(() => {
  console.log("🟡 Update");
});

// (2)
useEffect(() => {
  console.log("🟡 Count updated");
}, [count]);

• (1) 의존성 배열이 없을 경우 ([] 생략) : 모든 렌더링 후 실행됨 (Mount + 모든 Update)
• (2) 특정 상태나 props 변화에 반응하고 싶다면 의존성 배열을 사용

3️⃣ 언마운트 (Unmount) : 컴포넌트가 사라질 때

// (1)
useEffect(() => {
  return () => {
    console.log("🔴 Unmount");
  };
}, []);

// (2)
useEffect(() => {
  console.log("🟡 Effect for count");

  return () => {
    console.log("🧹 Cleanup before next count update or unmount");
  };
}, [count]);

• (1) cleanup 함수 : 컴포넌트가 DOM에서 제거되기 직전에 실행됨
• (2) 단, 의존성이 있는 useEffect에서는 해당 값이 변경될 때도 cleanup 함수가 먼저 실행됨