RESTful API에 액세스할 자체 갈고리 만들기

갈고리는 Release 16.8.0의React에 도입된 전환 특징이다.내장 연결 제외you can create your own hooks.
본고에서, 나는 당신에게 자신의 갈고리를 구축하고, 사용자 정의 갈고리를 사용하여 데이터를 얻는 방법을 보여 드리겠습니다.다음 예제에서 Create React App 및 TypeScript 을 사용합니다.

갈고리

갈고리는 단지 함수일 뿐이다.이것은 결코 신비롭지 않다.그것은 어떠한 구체적인 서명이나 성명도 없다.그것은 임의의 수량의 매개 변수를 받아들일 수 있고, 임의의 수량이나 유형의 값을 되돌릴 수 있다.니가 결정해.React는 사용자에게 어떠한 요구도 하지 않습니다.
하지만 한 가지 요구가 있습니다.갈고리 이름은 항상 use 로 시작해야 합니다.예를 들어, useGetUserInfo 은 유효한 갈고리 이름입니다.getUserInfo는 유효한 연결 이름이 아닙니다.
간단하게 말하면 갈고리는 use로 시작하는 함수이다.

자신의 갈고리 만들기

테스트를 해보겠습니다.
React 항목을 만듭니다.

yarn create react-app my-app --template typescript

편집src/App.tsx.

const useGetMessage = (): string => {
  return "Hello World";
};

const App = () => {
  const mesg = useGetMessage();
  return <div className="App">{mesg}</div>;
};

이 예에서 나는 갈고리useGetMessage를 만들었다.그것은 어떤 매개 변수도 받아들이지 않고 문자열을 되돌려줍니다.
나는 이것이 무용하다는 것에 동의한다. 간단한 함수 하나면 충분하다.나는 단지 갈고리가 함수일 뿐이라고 말하고 싶었을 뿐이다.

논점을 받아들이는 갈고리

가치를 얻을 수 있는 또 다른 갈고리를 만듭니다.

const useGetSquare = (num: number): number => {
  return num * num;
};

const App = () => {
  const square = useGetSquare(2);
  return <div className="App">{square}</div>;
};

간단하죠?
이곳에서 우리는 숫자 2의 제곱만 얻었다.나도 3과 4의 제곱을 얻고 싶다면?우리 이렇게 해도 돼요?

const App = () => {
  return (
    <div className="App">
      {useGetSquare(2)} {useGetSquare(3)} {useGetSquare(4)}
    </div>
  );
};

다른 갈고리를 사용한 갈고리

단추 클릭 횟수를 추적하는 데 사용할 갈고리를 만듭니다.
이것은 유치하고 부정확한 실현이다.

// incorrect example
const useButtonClicked = (): number => {
  let count = 0;
  count++;
  return count;
};

const App = () => {
  const count = useButtonClicked();
  const onButtonClick = () => {
    useButtonClicked();
  };
  return (
    <div className="App">
      <button onClick={onButtonClick}>Click Me</button>
      <h2>{count}</h2>
    </div>
  );
};

이 코드에 문제가 좀 있습니다.
우리는 어떻게 useButtonClicked 갈고리 안의 계수를 증가합니까?onButtonClick 방법 내부에서 갈고리를 호출하면 count 을 0으로 초기화합니다.
더 중요한 것은 React 구성 요소에서만 갈고리를 호출할 수 있다는 것이다.onButtonClick 반응 성분이 아니다.rules-of-hooks로부터의 경고가 이 점을 설명했다.

Line 12:32: React Hook "useButtonClicked" is called in function "onButtonClick" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

분명히 우리의 방법은 틀렸다.
우리는 useButtonClicked 갈고리에서 예를 들어 incrementCount 방법으로 되돌아갈 수 있다.그리고 구성 요소는 incrementCount 를 호출하여 갈고리 안의 계수를 증가시킬 수 있다.

// incorrect example
const useButtonClicked = (): [number, () => void] => {
  let count = 0;
  const incrementCount = () => {
    count++;
  };
  return [count, incrementCount];
};

주의해 주십시오. 우리는 수조를 사용하여 이 두 값을 되돌려 줍니다.
구성 요소는 이렇게 이 갈고리를 사용할 수 있는데,

const App = () => {
  const [count, incrementCount] = useButtonClicked();
  const onButtonClick = () => {
    incrementCount();
  };

  return (
    <div className="App">
      <button onClick={onButtonClick}>Click Me</button>
      <h2>{count}</h2>
    </div>
  );
};

이 코드는 rules-of-hooks 경고를 수정했습니다.하지만 그것도 정상적으로 일할 수 없다.버튼을 누르면 화면의 count 은 증가하지 않습니다.
console.log에 incrementCount 문장을 추가하여count의 값을 확인하면, incrementCount 값이 정확하게 증가하는 것을 관찰할 수 있습니다.이것은 JavaScript 패키지로 변수count에 액세스할 수 있습니다.
불행하게도 구성 요소 내부에서 count 값이 시대에 뒤떨어졌다.우리가 count 를 호출했을 때, 그것은 초기화되었다.

const [count, incrementCount] = useButtonClicked();

초기화된 후, 이 값은 영원히 업데이트되지 않습니다.
이 문제의 가장 간단한 해결 방안은 React의 갈고리를 사용하는 것이다.React 팀은 훅의 오래된 값을 복구했습니다.값이 업데이트될 때마다 구성 요소는 자동으로 업데이트된 값을 가져옵니다.
이 예에서 우리는 사용자 정의useButtonClicked 갈고리에서 useState 갈고리를 사용한다.

const useButtonClicked = (): [number, () => void] => {
  const [value, setValue] = React.useState(0);
  const incrementCount = () => {
    setValue(value + 1);
  };
  return [value, incrementCount];
};

이것은 문제를 해결했고, 갈고리는 정상적으로 작동한다.

현재 갈고리는 계수를 1 증가시킬 것이다.구성 요소가 증량 값을 결정할 수 있도록 갈고리를 수정합시다.그것은 아주 적은 변화만 필요로 한다.

const useButtonClicked = (increaseBy = 1): [number, () => void] => {
  const [value, setValue] = React.useState(0);
  const incrementCount = () => {
    setValue(value + increaseBy);
  };
  return [value, incrementCount];
};

const App = () => {
  const [count, incrementCount] = useButtonClicked(2);
...

계수는 0에서 시작하고 그 다음은 2, 그 다음은 4로 추정된다.

갈고리를 수정하여 계수가 0에서 시작하는 것이 아니라 구성 요소가 제공하는 모든 숫자에서 시작할 수 있도록 합니다.

const useButtonClicked = (increaseBy = 1, initialValue = 0): [number, () => void] => {
  const [value, setValue] = React.useState(initialValue);
...
const App = () => {
  const [count, incrementCount] = useButtonClicked(2, 10);

사용자 정의 갈고리로 useState 요청 보내기

지금까지 우리는 연결이 함수라는 것을 이미 알고 있다.우리는 다른 함수에서 하나의 함수를 사용할 수 있다. 완전히 마찬가지로, 우리는 다른 갈고리에서 갈고리를 사용할 수 있다.매개 변수를 전달하고 어셈블리에서 반환 값을 사용할 수 있습니다.
사용자 정의 갈고리에서 자질구레한 동작을 수행하려면React의 미리 정의된 갈고리를 사용해야 합니다.
이러한 지식이 있으면 우리는 갈고리를 만들어서 Reqres로부터 사용자 정보를 얻을 것이다.
하나의 요청은 세 가지 상태가 있을 수 있지만,

서버 응답 대기 중 시작

완료

실패

우리의 맞춤형 갈고리에서 useState 갈고리가 아니라 useButtonClicked 갈고리를 사용하는 것이 적합하다.당신은 그 원리를 더욱 잘 이해하기 위해 본문 GET hook을 읽을 수 있습니다.

"React에서 fetch()를 사용하여 useReducer와 연결할 때" useState 정의

다음 몇 줄에서 우리는 하나를 정의할 것이다 useState.갈고리의 사용자는 사용자 ID를 전달합니다.반대로 요청이 처리 중이거나 요청이 실패했을 때 사용자 정보와 요청 상태를 되돌려줍니다.
서버가 갈고리의 JSON 객체에 보내는 인터페이스입니다.

interface Info {
  id: number;
  emai: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

갈고리가 실행할 수 있는 조작 인터페이스.

type HookAction =
  | { type: "fetching" }
  | { type: "success"; payload: Info }
  | { type: "error" };

갈고리 상태의 인터페이스.

interface HookState {
  isFetching: boolean;
  isSuccessful: boolean;
  errorMessage: string;
  result: Info | null;
}

연결의 기본 상태입니다.

const hookInitialState: HookState = {
  isFetching: false,
  isSuccessful: false,
  errorMessage: "",
  result: null
};

Reducer 함수 업데이트 상태입니다.

const hookReducer = (state: HookState, action: HookAction): HookState => {
  switch (action.type) {
    case "fetching":
      return {
        ...state,
        isFetching: true,
        isSuccessful: false,
        errorMessage: "",
        result: null
      };

    case "success":
      return {
        ...state,
        isFetching: false,
        isSuccessful: true,
        result: { ...action.payload }
      };

    case "error":
      return {
        ...state,
        isFetching: false,
        isSuccessful: false,
        errorMessage: "User not found"
      };
  }
};

현재 우리는 상태, 동작과 감속기가 생겼고, 갈고리를 인코딩했다useReducer.

const useGetInformation = (): [HookState, (id: number) => void] => {
  const [fetchState, dispatch] = React.useReducer(
    hookReducer,
    hookInitialState
  );

  const fetchInfo = (id: number) => {
    fetch(`https://reqres.in/api/users/${id}?delay=5`)
      .then((response) =>
        response.status === 200
          ? Promise.resolve(response.json())
          : Promise.reject(response.status)
      )
      .then((data) => {
        dispatch({
          type: "success",
          payload: { ...data.data },
        });
      })
      .catch((err) => {
        dispatch({ type: "error" });
      });
  };

  const getInfoForId = (id: number) => {
    dispatch({ type: "fetching" });
    fetchInfo(id);
  };

  return [fetchState, getInfoForId];
};

2-5행에서는 React의 내장 갈고리useGetInformation를 사용합니다.우리는 감속기와 기본 상태를 전달합니다.그것은 useGetInformation 및 useGetInformation 으로 돌아갑니다.갈고리는 필요하지 않지만, 갈고리 사용자에게 공개될 것이다.갈고리 사용자는 useReducer 의 값을 읽고 구성 요소를 업데이트합니다.fetchState 갈고리 사용dispatch 업데이트 상태.
7-23 행은 fetchState 로 정의됩니다.이 방법은 에서 사용자 정보를 얻고 요청이 실패하거나 성공할 때 스케줄링을 합니다.
25-28행에는 방법fetchState이 있습니다.갈고리의 사용자는 이 방법으로 사용자 ID를 전달합니다. ID를 받으면 useGetInformation fetchInfo를 호출하여 가져오기 프로세스를 시작합니다.
갈고리가 정의한 마지막 줄 30에서 우리는 dispatch 과 fetchInfo 을 되돌려줍니다.

수요 getInfoForId의 예제 사용 방법

우리는 구성 요소를 정의할 것이다. 이 구성 요소는 사용될 것이다 getInfoForId.

const App = () => {
  const [
    { result, isSuccessful, isFetching, errorMessage },
    getInfoForId
  ] = useGetInformation();

  const onButtonClicked = () => {
    getInfoForId(1);
  };

  return (
    <div className="App">
      {isSuccessful && !isFetching && result && (
        <h2>First Name: {result.first_name}</h2>
      )}
      {!isSuccessful && !isFetching && errorMessage.length > 0 && (
        <h2>Error: {errorMessage}</h2>
      )}
      {isFetching && <h3>Please Wait</h3>}

      <button onClick={onButtonClicked} disabled={isFetching}>
        Get User 1 Info
      </button>
    </div>
  );
};

이것은 간단한 구성 요소다.
그것은 fetchState 갈고리에서 돌아온 getInfoForId 을 useGetInformation 으로 분해한다.
결과의 사용자 이름, 오류가 발생했을 때의 오류 메시지, 처리를 요청할 때의'기다려주세요'메시지를 표시합니다.
요청이 처리 중일 때 이 단추는 비활성화됩니다.버튼을 클릭하면 갈고리에 사용자 IDuseGetInformation가 전달됩니다.

단추 두 개를 더 추가합시다.

  const onButton1Clicked = () => {
    getInfoForId(1);
  };

  const onButton2Clicked = () => {
    getInfoForId(2);
  };

  const onButton3Clicked = () => {
  // User with ID 100 is not present
    getInfoForId(100);
  };
...
      <button onClick={onButton1Clicked} disabled={isFetching}>
        Get User 1 Info
      </button>
      <button onClick={onButton2Clicked} disabled={isFetching}>
        Get User 2 Info
      </button>
      <button onClick={onButton3Clicked} disabled={isFetching}>
        Get Invalid User Info
      </button>

잘못된 사용자 정보 가져오기 버튼을 클릭한 결과입니다.

이 코드는 샌드박스에서 사용할 수 있습니다.

이 링크 끝내다

이 강좌에서 우리는 사용자 정의 갈고리를 만드는 방법을 배운 후에 이 지식을 이용하여 갈고리를 만들었습니다. 이 갈고리는 RESTful API 서버에 fetchState 요청을 실행합니다.우리는 useGetInformation,{ result, isSuccessful, isFetching, errorMessage },1을 위해 유사한 갈고리를 제작해 달라고 요청할 수 있다.
표지 사진 귀속: