부수 효과(side effect)를 다루기 위한 훅으로, 여기서 말하는 부수 효과란 컴포넌트의 주요 역할인 UI 렌더링 외의 발생하는 모든 작업을 말한다. 이는 마치 자동화된 비서와 비슷하다.

useEffect가 필요한 이유

함수형 컴포넌트는 기본적으로 **“순수 함수”**처럼 작동해야 한다. 즉, 주어진 입력(props, state)에 따라 UI를 반환하고 다른 작업은 하지 않아야 한다.

하지만 실제 애플리케이션에서는 다음과 같은 부수 효과가 필요하다.

이러한 작업들은 렌더링 과정과 별개로 관리되어야 하며, 이때 useEffect가 필요하다.

useEffect 기본 구조

useEffect(() => {
  // 수행할 효과 (부수 효과)
  
  return () => {
    // 정리(cleanup) 함수 (선택적)
  };
}, [/* 의존성 배열 */]);