React useEffect 완벽 정리

useEffect란?

useEffect는 React 함수형 컴포넌트에서 부수 효과(side effect)를 처리하기 위한 Hook입니다.

기본 구조

useEffect(() => {
  // 실행할 코드
  return () => {
    // cleanup 함수 (optional)
  };
}, [deps]); // 의존성 배열

deps 배열에 따른 동작

• 생략 시: 매 렌더링마다 실행
• 빈 배열 []: 최초 마운트 시 1회만 실행
• 값이 있는 배열: 해당 값이 변경될 때마다 실행

cleanup 함수

컴포넌트 언마운트 시, 그리고 다음 이펙트 실행 직전에 실행됩니다. 이벤트 리스너 제거, 타이머 정리, 구독 취소 등에 사용합니다.

useLayoutEffect와의 차이

useLayoutEffect는 DOM 업데이트 직후 동기적으로 실행되고, useEffect는 페인트 이후 비동기로 실행됩니다.