[TIL] useEffect

useEffect는 react hooks중 하나로 side effect를 수행하는 데 사용됩니다

1. 컴포넌트가 처음 렌더링되면, useEffect 내부 함수가 실행되고
2. 의존성 배열의 값이 바뀔 때 마다 useEffect 내부 함수가 실행됩니다
만약 빈배열이라면 컴포넌트가 마운트될 때 한번만 실행됩니다

 

매개변수

useEffect는 두 개의 매개변수를 받을 수 있습니다.

Effect 함수: 이 함수는 컴포넌트가 렌더링된 후에 실행됩니다. 이 함수에서는 데이터 fetching, 구독 설정, 수동으로 변경되는 DOM 등 side effect를 수행할 수 있습니다.

Dependency 배열: Dependency 배열은 effect 함수가 의존하는 state와 props를 명시합니다. 배열 내부의 어떤 값이 변하면, effect 함수는 다시 실행됩니다. 빈 배열을 전달하면, effect는 컴포넌트가 mount될 때 한 번만 실행됩니다.

 

Cleanup 함수
useEffect 내부에서 반환하는 함수를 Cleanup 함수라고 합니다. 이 함수는 컴포넌트가 unmount될 때, 또는 dependency가 변경될 때 호출되며, 이를 통해 구독 해지, 이벤트 리스너 제거 등의 cleanup 작업을 수행할 수 있습니다.

 

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // count가 변경될 때마다 이 effect가 실행됩니다.
    document.title = `Count: ${count}`;

    return () => {
      // cleanup: count가 변경되기 전에 실행됩니다.
      console.log('Cleaning up!');
    };
  }, [count]); // Dependency 배열에 count를 지정했습니다.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}