[공부용] React hooks에서 비동기 처리 작성 (5 단계)

소개

이전 단계 부터 계속해서 공부용 useFetch를 써 갑니다. 이번 테마는 취소 처리입니다.

도전

URL을 변경하면 정리 처리가 실행되고 새 데이터 검색이 실행되지만 브라우저가 처리하기 전에 데이터 검색 처리를 중지할 수 있는 것은 아닙니다. 예를 들어, 긴 데이터를 전송중이거나, 서버로부터의 응답을 기다리고 있거나, 서버의 이름 해석을 하고 있는 경우는, 데이터 취득의 처리는 계속하고 있습니다. fetch는 promise 기반 API이지만 AbortController 을 사용하여 처리를 취소할 수 있습니다.

5단계: 취소 처리

const useFetch = url => {
  const [result, setResult] = useState({});
  useEffect(() => {
    let cleanedUp = false;
    const abortController = new AbortController();
    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          signal: abortController.signal
        });
        if (!response.ok) throw new Error(`status: ${response.status}`);
        const data = await response.json();
        if (!cleanedUp) {
          setResult({ data });
        }
      } catch (error) {
        if (!cleanedUp) {
          setResult({ error });
        }
      }
    };
    setResult({ loading: true });
    fetchData();
    const cleanup = () => {
      cleanedUp = true;
      abortController.abort();
      setResult({});
    };
    return cleanup;
  }, [url]);
  return result;
};

만약을 위해, cleanup에서 result도 초기화하도록 했습니다. (순간 이전의 result로 렌더링 되는 것을 막기 위해)

동작 확인

실제로 움직이는 코드는 여기입니다. codesandbox
취소 동작은 UI에서 직접 알 수 없으므로 Chrome DevTools에서 Network 탭을 확인하세요.



이런 식으로 로딩 중에 URL을 변경하면 취소 된 것을 확인할 수 있다고 생각합니다.

결론

본 코드는 공부용이므로 그대로는 사용하지 마십시오. (제대로 된 구현은 여기)
추가 과제와 해결은 다음 단계