[React] useEffect 훅에 대해서

useEffect란?

useEffect는 React의 Hook 중 하나로서, 함수형 컴포넌트에서 사이드 이펙트(side effects)를 관리하는 데 사용된다.

사이드 이펙트란 데이터 가져오기, 수동으로 React 컴포넌트의 DOM을 수정하는 것 등, 다른 함수들이나 컴포넌트에 영향을 미치는 작업들을 의미한다.

❗ useEffect의 사용

기본적인 useEffect

기본적으로 useEffect 훅은 이런식으로 작성한다

useEffect(() => {
  // 여기에 사이드 이펙트를 수행하는 코드를 작성합니다.
}, [dependency1, dependency2]);

useEffect 훅은 두가지 인자를 받는데 첫번째 인자는 실행할 함수, 두번째 인자는 의존성 배열이다.
의존성 배열에 지정된 값이 변경될 때마다 첫번째 인자인 함수를 실행하게 된다.

의존성 배열이 비어있는 useEffect

만약에 의존성 배열이 비어있다면, 컴포넌트가 처음 랜더링되었을 때 한번만 실행하게 된다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때 한 번만 실행됩니다.
}, []);

cleanup 함수

useEffect 내의 함수에서 값을 반환하면, 그 값은 정리 함수(cleanup function)로 간주된다.
정리 함수는 컴포넌트가 언마운트되거나, 의존성이 변경되어 useEffect가 다시 실행될 때 호출된다.
이는 리소스를 정리하거나, 구독을 취소하는 등의 작업을 수행하는데 사용된다.

useEffect(() => {
  // 사이드 이펙트를 수행합니다.

  return () => {
    // 컴포넌트가 언마운트되거나 의존성이 변경될 때 정리 작업을 수행합니다.
  };
}, [dependency]);

❗ useEffect 예제

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

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

  useEffect(() => {
    let cancel = () => {};

    const fetchData = async () => {
      try {
        const response = await axios.get(url, {
        });
        setData(response.data);
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('Data fetch cancelled');
        } else {
          console.error(error);
        }
      }
    };

    fetchData();

    return () => cancel();  // cleanup 함수
  }, [url]);  // 의존성 배열

  return (
    <div>
      {data ? JSON.stringify(data) : 'Loading...'}
    </div>
  );
}

export default DataFetcher;

이 코드에서 useEffect는 url prop이 변경될 때마다 실행된다.
useEffect 내에서는 fetchData라는 비동기 함수를 정의하고 호출하고, 이 함수는 axios를 사용하여 데이터를 가져온다.

useEffect의 반환 값은 cleanup 함수이다.
이 함수는 useEffect가 다시 실행되기 전이나 컴포넌트가 언마운트될 때 호출된다. 이 예제에서는 cleanup 함수에서 axios 요청을 취소하는 작업을 수행합니다.

이렇게 useEffect와 cleanup 함수를 사용하면, 비동기 작업을 수행하면서도 필요에 따라 그 작업을 취소하거나 정리하는 등의 작업을 쉽게 수행할 수 있습니다.