[React] Custom Hook 만들기 (fetch, AbortController)

Before learn...

리액트 Hook은 리액트 함수 컴포넌트에서만 사용할 수 있다.

Custom Hooks

상태 관리 로직을 재활용할 수 있게 하는 함수

클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.
함수형으로 작성하기 때문에 코드가 보다 명료하다.
상태 관리 로직을 재활용할 뿐, Custom hook을 호출하는 각각의 컴포넌트에서는 독립된 상태를 사용한다.

Custom hook 만들기

custom hook은 반드시 use로 시작하는 이름을 가져야 한다.

재사용하려는 코드를 Hook 함수 안에 작성한다.
Hook에서 반환하는 값을 변수에 담는다. (변수에 함수 호출을 할당한다.)
매개변수를 받는다면 useEffect의 의존성으로 추가해야 한다.

useFetch

서버에서 data를 받아오는 GET 요청을 처리하기 위한 hook

//useEffect, useState를 불러온다.
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  
  //state
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);
  
 
  useEffect(() => {
   
    //create a instance of AbortController 
    const abortCont = new AbortController();

    setTimeout(() => {
      
      //The fetch method knows how to work with AbortController.
      fetch(url, { signal: abortCont.signal })
      .then(res => {
        if (!res.ok) { // error coming back from server
          throw Error('could not fetch the data for that resource');
        } 
        return res.json();
      })
      .then(data => {
        setIsPending(false);
        setData(data);
        setError(null);
      })
      .catch(err => {
        //handle abort
        if (err.name === 'AbortError') {
          console.log('fetch aborted')
        } else {
          // auto catches network / connection error
          setIsPending(false);
          setError(err.message);
        }
      })
    }, 1000);

    //abort the fetch request
    return () => abortCont.abort();
  }, [url]) //custom hook의 인자로 들어오는 url을 의존성에 추가한다.

  return { data, isPending, error }; //해당 state를 return한다.
}

export default useFetch;

💡 AbortController

자바스크립트에서 fetch 요청 등의 비동기 작업을 중단하기 위한 API
single method abort()와 single property signal을 갖는다.

사용방법

1. fetch(url, { signal: abortCont.signal })

AbortController 인스턴스의 signal 프로퍼티를 fetch의 signal 옵션으로 할당한다.
(That allows to set event liseners on it. 즉 abort할 수 있다는 signal을 주는 것)

Sets the listener to trigger when controller.abort() is called.
We pass signal property as the option, and then fetch listens to it, so it becomes possible to abort the fetch.

2. Handle error 'AbortError'

When a fetch is aborted, its promise rejects with an error AbortError, so we should handle it, e.g. in try..catch.

3. abortCont.abort(): call abort() to abort the fetch when needed.

"call abort()" → “listen to abort event”
fetch gets the event from signal and aborts the request.

아래 링크의 글을 공부하고 있습니다.

https://ko.javascript.info/fetch-abort