React Hooks Deep Dive: useEffect와 생명주기

소개

React Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 연동할 수 있게 해주는 강력한 도구입니다. 그 중에서도 useEffect는 가장 자주 사용되면서도 오해하기 쉬운 Hook 중 하나입니다. 이 글에서는 의존성 배열(dependency array)을 올바르게 다루는 법을 알아봅니다.

의존성 배열의 비밀

useEffect의 두 번째 인자인 의존성 배열은 이펙트가 실행되는 타이밍을 결정합니다. 빈 배열 []을 넣으면 컴포넌트 마운트 시에만 실행됩니다.

useEffect(() => {
  console.log('Mounted!');
}, []);

Cleanup 함수 이해하기

컴포넌트가 언마운트되거나 다음 이펙트가 실행되기 전에 정리(clean-up) 작업이 필요할 때가 있습니다. 이벤트 리스너를 제거하거나 타이머를 해제하는 것이 대표적인 예입니다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
 
  return () => {
    clearInterval(timer);
  };
}, []);

결론

Hooks를 마스터하는 것은 모던 리액트 개발의 핵심입니다. 불필요한 렌더링을 줄이고 코드의 가독성을 높이기 위해 올바른 패턴을 숙지하세요.