useEffect

useEffect 훅은 컴포넌트 생명 주기에 따른 코드를 작성하고 싶을 때 사용할 수 있는 훅입니다.

useEffect(() => {
  // 실행할 작업
  return () => {
    // 정리(cleanup) 작업 (옵션)
  };
}, [dependencyArray]); // 의존성 배열

컴포넌트 생명주기

컴포넌트 생명주기란, 컴포넌트가 생성되고 삭제가 되는 순간까지 거쳐가는 일련의 주기를 말합니다.
리액트에서는 컴포넌트 생명주기를 ‘생성’, ‘수정(업데이트)’, ‘삭제’의 세 가지로 구분하고 있습니다.

• 기본적으로 useEffect는 렌더링 이후에 실행됩니다.
• 마운트(처음 렌더링) 시 실행됩니다.
• 업데이트(의존성 배열 변경 시) 시 실행됩니다.
• 언마운트(컴포넌트가 사라질 때) 시 정리 작업(return 함수)이 실행됩니다.

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('타이머 동작 중...');
  }, 1000);

  return () => {
    console.log('타이머 정리!');
    clearInterval(intervalId);
  };
}, []);

• 빈 배열([])이면: 처음 렌더링 후 한 번만 실행됩니다.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다!');
}, []); // 빈 배열

• 배열에 값이 있으면: 해당 값이 바뀔 때만 실행됩니다.

useEffect(() => {
  console.log(`count가 ${count}로 변경되었습니다!`);
}, [count]); // count가 변경될 때만 실행

• 의존성 배열을 정확히 작성해야 무한 렌더링을 방지할 수 있습니다.