[React] 컴포넌트 라이프사이클과 useEffect

컴포넌트 라이프사이클

React의 컴포넌트는 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting)라는 3단계의 라이프사이클을 가집니다. 각 단계에서는 특정 시점에 실행되는 메서드가 있어 원하는 로직을 추가할 수 있습니다.

• Mounting: 컴포넌트가 화면에 처음 렌더링될 때 발생합니다. 예전 클래스 컴포넌트에서는 componentDidMount를 주로 사용했습니다.
• Updating: 컴포넌트의 props나 state가 변경될 때마다 발생합니다. 클래스 컴포넌트에서는 componentDidUpdate 메서드를 통해 이 시점을 감지할 수 있었습니다.
• Unmounting: 컴포넌트가 화면에서 제거될 때 발생합니다. 이때 componentWillUnmount를 통해 정리 작업을 처리하곤 했습니다.

useEffect 사용법

useEffect(() => {
  // 실행할 코드
}, [/* 의존성 배열 */]);

• 첫 번째 매개변수: 실행할 함수를 전달합니다.
• 두 번째 매개변수: 의존성 배열로, 이 배열에 있는 값이 변경될 때마다 useEffect가 재실행됩니다.

예시)

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []); // 빈 배열을 넣으면 컴포넌트가 마운트될 때만 실행됨

라이프사이클 단계별 useEffect 활용법

1) Mounting 단계 – 컴포넌트가 화면에 렌더링될 때

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

2) Updating 단계 – 상태나 props가 변경될 때
상태나 props가 변경될 때마다 특정 작업을 실행하고 싶다면, 해당 상태나 props를 의존성 배열에 추가하면 됩니다.

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

3) Unmounting 단계 – 컴포넌트가 화면에서 사라질 때

useEffect(() => {
  const timer = setInterval(() => {
    console.log('타이머 실행 중');
  }, 1000);

  return () => {
    clearInterval(timer); // 컴포넌트가 언마운트될 때 타이머 정리
  };
}, []);

API 데이터를 주기적으로 가져오기

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData(); // 초기 데이터 로드
    const intervalId = setInterval(fetchData, 5000); // 5초마다 데이터 갱신

    return () => clearInterval(intervalId); // 컴포넌트 언마운트 시 타이머 정리
  }, []);

  return (
    <div>
      <h1>데이터:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}