리액트의 생명주기(Life Cycle)와 useEffect

리액트의 생명주기란, 컴포넌트가 생성 → 업데이트 → 제거되는 전 과정에서 자동으로 호출되는 함수 흐름 또는 타이밍이다.
이를 통해 비동기 처리, 데이터 불러오기, 정리 작업(cleanup) 등을 할 수 있다.

함수형 컴포넌트의 생명주기

1. Mount (처음 나타날 때)

컴포넌트가 탄생, 화면에 처음 렌더링되는 순간

useEffect(() => {
  console.log('마운트됨');

  return () => {
    console.log('언마운트될 때 실행됨');
  };
}, []);

🔍 내부 동작

• DOM 생성 완료 후, 브라우저가 그린 다음(paint) 비동기적으로 실행
• [] 빈 배열이므로 처음 한 번만 실행됨

이때:

• 초기 API 호출
• 이벤트 리스너 등록
• 애니메이션 시작 등 처리

2. Update (state나 props 변경 시)

컴포넌트가 다시 렌더링되는 순간, 리렌더링

useEffect(() => {
  console.log('someState 변경됨!');
}, [someState]);

🔍 내부 동작

• someState가 변경될 때마다 실행됨

실행 순서:
1. 변경된 상태로 리렌더링
2. 렌더링 완료 후 useEffect 실행

⚠️ 주의

• 의존성 배열이 없는 useEffect는 모든 렌더링마다 실행됨

3. Unmount (사라질 때)

컴포넌트가 화면에서 사라지는, 렌더링에서 제외되는 순간 (컴포넌트가 사용하던 메모리 정리)

useEffect(() => {
  // 마운트 or 업데이트 때 실행
  return () => {
    // 언마운트 시 실행 (cleanup)
  };
}, []);

🔍 내부 동작

return 함수는:

• 컴포넌트가 unmount될 때
• 혹은 의존성 값이 바뀌기 “직전”에 실행됨 (→ cleanup)

주로 하는 일:

• 타이머 정리
• 이벤트 리스너 제거
• 외부 라이브러리 연결 해제 등

useEffect 전체 흐름 순서도

function Component({ someProp }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('1. 마운트 or someProp 변경 시 실행');

    return () => {
      console.log('2. 언마운트 or 의존성 변경 전 정리');
    };
  }, [someProp]);

  return <div>{count}</div>;
}

실행 순서

1. 컴포넌트 렌더링 시작
2. DOM 업데이트
3. useEffect 실행
4. 다음 렌더링 전, 이전 useEffect의 return 정리 함수 호출