🪝 사용자 지정 React 후크 만들기

당신은 React hooks에 대해 들었고 그것에 대해 이해하기 시작했고 주요 것들이 무엇을 하는지 이해하고 당신의 컴포넌트에서 그것들을 쉽게 사용할 수 있습니다.

애플리케이션의 비즈니스 로직을 포함하기 위해 레벨을 올리고 사용자 지정 후크 생성을 시작할 때입니다.

고유한 후크를 구축할 때의 주요 이점은 논리를 캡슐화하고 응용 프로그램 전체에서 재사용하여 여러 위치에서 코드를 반복하지 않도록 할 수 있다는 것입니다.

작업과 프로젝트라는 두 가지 항목 세트를 사용자에게 표시하는 애플리케이션을 상상해 봅시다. 이를 위해 2개의 서로 다른 API 끝점을 호출하는 2개의 개별 구성 요소가 있습니다. 요청 수명 주기를 처리하고 둘 다에 대한 상태를 유지해야 하므로 각 사례에 대해 작동하는 솔루션을 코딩해 보겠습니다.

후크 만들기

React에서 후크의 표준 관행은 이름이 use 로 시작하므로 후크를 useItemsLoader 라고 합니다.

const useItemsLoader = () => {};

상태, 입력 및 출력 정의

다른 끝점에 대해 후크를 구성할 수 있도록 만들고 싶으므로 여기에 입력 매개 변수를 추가합니다.

후크는 데이터(항목 포함) 및 요청 상태( LOADING , DONE 및 ERROR ) 저장을 담당합니다. 데이터의 모양이 충분히 단순하기 때문에(단지 몇 개의 필드) 단일 변수에 저장할 것입니다. 이를 위해 useState 후크를 사용합니다.

마지막으로 후크의 호출자 구성 요소가 제대로 렌더링될 수 있도록 데이터를 반환합니다.

const useItemsLoader = (endpoint) => {
  const [data, setData] = useState({ items: null, state: 'LOADING' });
  return data;
};

데이터 요청

요청을 트리거할 방법이 필요하므로 useEffect 후크를 사용합니다. 후크는 구성 요소가 마운트되면 데이터를 가져옵니다.

또한 결과에 따라 상태를 설정하여 요청의 수명 주기를 관리합니다.

useEffect(() => {
    fetchItems(endpoint)
    .then( items => setData({ items, state: 'DONE' }))
        .catch( () => setData({ items: null, state: 'ERROR' });
}, [endpoint]);

모든 것을 하나로 모으기

이것은 후크의 최종 결과입니다.

const useItemsLoader = (endpointPath) => {
    const [data, setData] = useState({ items: null, state: 'LOADING' });

    useEffect(() => {
        fetchItems(endpoint)
        .then( items => setData({ items, state: 'DONE' }))
            .catch( () => setData({ items: null, state: 'ERROR' });
    }, [endpoint]);

    return data;
};

다음은 out 구성 요소에서 사용할 수 있는 방법입니다.

const Tasks = () => {
  const tasksData = useItemsLoader('path/to/tasks');

  if (tasksData.state === 'LOADING') return <div>Loading data...</div>;
  if (tasksData.state === 'ERROR') return <div>Something went wrong</div>;

  return (
    <div>
      <h1>Tasks</h1>
      {tasksData.items.map((task) => (
        <Task task={task} />
      ))}
    </div>
  );
};

Projects를 재사용하지만 다른 끝점을 사용하여 다른 useItemsLoader 구성 요소에 대해 동일한 작업을 수행할 수 있습니다.

사용자 지정 후크는 더 복잡한 솔루션의 경우에도 좋은 솔루션입니다. 이를 통해 코드의 유지 관리성을 향상시키는 구성 요소에서 논리를 포함하고 분리할 수 있습니다. 앞으로 무언가를 변경해야 하는 경우 한 곳에서 변경해야 합니다.