어떻게 될까요?

React에서 fetchData를 분해하고 추상화하는 방법을 배웁니다. 애플리케이션의 성능과 확장성을 높일 수 있습니다.

중고 기술

리액트

맞춤형 후크

원사

시작

프로젝트 기반을 사용하여 시작 분기를 사용하여 이 저장소abstracting-fetchData의 내 GitHub에서 액세스할 수 있는 이 게시물을 시작하겠습니다.
여기에는 일부 경로, 구성 요소 및 후크와 함께 일반적인 방식으로 생성된 반응 애플리케이션이 있습니다. 컴퓨터에서 프로젝트를 복제하고 실행 중인 종속성을 설치합니다yarn.

프로젝트 기반에는 navbar를 통해 탐색할 수 있는 두 페이지가 있습니다.

Github 페이지는 github API를 호출하고 일부 프로필 데이터를 표시합니다.

포켓몬 페이지에서 pokeapi를 호출하고 일부 포켓몬 데이터를 표시합니다.

공통 모드

구성 요소 논리를 후크로 추상화하는 것이 수행 응용 프로그램에 유용하고 테스트를 더 쉽고 확장 가능하게 만든다는 것은 누구나 알고 있습니다. 대부분의 프로젝트는 후크에서 분리된 논리가 있는 구성 요소인 이 아키텍처를 사용합니다. 우리는 여기에서 이것을 볼 수 있습니다:


여기에 후크 컨설팅 github api가 있습니다.


그리고 여기에 후크 컨설팅 pokeapi가 있습니다.

두 후크 모두 일부 URL에 가져오기가 있는 것을 볼 수 있습니다. 이것을 추상화하고 응용 프로그램이 일반적인 방식으로 진행되는 방법에 대해 생각해 본 적이 있습니까? 다행스럽게도 react는 연결된 다른 구성 요소가 변경될 때 구성 요소를 렌더링하는 이 기능을 제공합니다. 당신은 곧 더 잘 이해하게 될 것입니다 ...

가져오기 데이터 추상화

fetchData를 추상화해 보겠습니다. src > hooks > useFetch.ts에 새 파일을 만듭니다.

import { useEffect, useState } from "react";

export const useFetch = <T>(url: string) => {
  const [response, setResponse] = useState<T>();

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(url);
        const data = await res.json();

        setResponse(data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, [url]);

  return { response };
};

여기에는 url 매개변수를 받아들이고 url이 변경될 때 새로운 가져오기를 수행하여 데이터를 설정하고 반환하는 함수가 있습니다.

이제 사용자 정의 후크는 이 후크를 호출하여 매개변수로 URL을 전달합니다.

import { useFetch } from "./useFetch";

interface Github {
  name: string;
  avatar_url: string;
}

export function useGithub() {
  const { response } = useFetch<Github>("https://api.github.com/users/ViniBGoulart");

  return { github: response };
}

src > hooks > useGithub.ts

import { useFetch } from "./useFetch";

interface Pokemon {
  name: string;
  sprites: {
    front_default: string;
  };
}

export function usePokemon() {
  const { response } = useFetch<Pokemon>("https://pokeapi.co/api/v2/pokemon/ditto");

  return { pokemon: response };
}

src > hooks > usePokemon.ts

페이지 구성 요소도 변경해야 합니다. github?.avatar_url 와 같이 개체에 선택적 연결을 추가합니다.

짜잔! useFetch 논리를 추상화하여 확장 및 테스트를 더 쉽게 만듭니다!

여기에서 최종 프로젝트에 액세스할 수 있습니다abstracting-fetchData!