useEffect 후크에서 API 요청을 처리하는 올바른 방법

useEffect 후크에서 API에 대한 비동기 요청을 발행하는 것이 일반적입니다. 결국 구성 요소 상태를 업데이트하는 데 사용되는 일부 데이터를 가져올 수 있습니다. 이 같은:

const [data, setData] = useState([]);

useEffect(() => {
  axios.get('get/some/data').then(({ data }) => {
    setData(data);
  });
}, []);

요청이 완료되기 전에 구성 요소가 마운트 해제되는 상황이 발생하는 것도 일반적입니다. 요청이 취소되지 않았기 때문에 구성 요소가 마운트 해제되더라도 콜백은 계속 실행됩니다. 결과적으로 setData가 호출되면 브라우저 콘솔에 다음과 같은 흥미로운 경고가 표시됩니다.

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

이 문제를 해결하는 방법

이 문제를 해결하려면 구성 요소가 마운트 해제될 때 요청을 취소해야 합니다(useEffect 정리 기능에서). 이는 다음과 같이 axios를 사용하여 쉽게 달성할 수 있습니다.

const [data, setData] = useState([]);

useEffect(() => {
  const cancelToken = axios.CancelToken.source();

  axios
    .get('get/some/data', { cancelToken: cancelToken.token })
    .then(({ data }) => {
      setData(data);
    })
    .catch((err) => {
      if (axios.isCancel(err)) {
        // TODO
      }
    });

  return () => {
    cancelToken.cancel();
  };
}, []);

이는 다음과 같이 fetch를 사용하여 AbortController로 수행할 수도 있습니다.

const [data, setData] = useState([]);

useEffect(() => {
  const controller = new AbortController();

  fetch('get/some/data', { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => {
      setData(data);
    })
    .catch((err) => {
      if (err.name === 'AbortError') {
        // TODO
      }
    });

  return () => {
    controller.abort();
  };
}, []);