React Hooks로 맞춤형 고리 만들어주세요.

이른바 React Hooks

리액트 16.8에 추가된 새로운 기능은React Hooks이다.
함수 구성 요소에서도 state와 각종 React 기능을 사용할 수 있습니다.
React Hooks를 사용하면 기본적으로 함수 구성 요소만 있으면 실현할 수 있다[1].

낚시

후크는 JavaScript의 함수이며, 사용자 정의 후크는 직접 만듭니다.
갈고리를 사용하면 다음과 같은 장점이 있다.

구성 요소 내의 복잡한 논리를 분리할 수 있음

논리적 재활용이 용이해짐

테스트가 간단해짐

그럼 실제로 특제 고리를 만들어 보세요. 좋은 점을 경험해 보세요.

사용자 정의 갈고리를 만들어 보세요.

몇 개의 연결고리를 사용하면 규칙이 있으니 우선 한번 해 보세요.
설명용샘플 코드을 준비했습니다.
버튼을 클릭할 때마다 계수를 계수 처리한다.
어서 특제 갈고리로 다시 써라.

import { useState } from "react";
import { DefaultButton } from "../../components/DefaultButton";
const Home = () => {
    const [count, setCount] = useState<number>(0);
    return (
        <div>
            <div>現在の値：{count}</div>
            <DefaultButton onClick={() => setCount((prevCount) => prevCount + 1)}>
               +1 する
            </DefaultButton>
        </div>
    );
};
export { Home };

맞춤형 낚싯바늘 만들기

사용자 정의 낚싯바늘을 설치한 목록 구성은 특별한 규칙이 없지만 제작hook/index.tsx하여 배치한다.

import { useState } from "react";
export const useCounter = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount((prevCount) => prevCount + 1);
    };
    return { current: count, increment: increment };
};

이렇게 완성useCounter되었습니다.

현재 카운터 값current의 값

을 얻을 수 있습니다.

현재 계수기의 값을 +1increment하는 방법

그러니까

사용자 정의 낚싯바늘 사용

실제 화면에서 사용하는 장면을 살펴봅시다.

import { useState } from "react";
import { DefaultButton } from "../../components/DefaultButton";
import { useCounter } from "../../hooks";
const Home = () => {
  const { current, increment } = useCounter();
  return (
    <div>
      <div>現在の値：{current}</div>
      <DefaultButton onClick={() => increment()}>+1 する</DefaultButton>
    </div>
  );
};
export { Home };

간단한 코드라도 계수기 전용 사용자 정의 연결을 만들 수 있는데 코드가 알기 쉬워졌는지 알아봤다.

useCounter를 통해 사용useState에 비해 계수기의 처리임을 명확히 했다

계수기 값을 +1 증가시키는 은밀한 규칙을 useCounter내

에 도입할 수 있다

increment만 준비했기 때문에 계수기의 값을 무단으로 줄일 염려가 없다(웃음)

그러니까
구성 요소 안에 있는 계수기의 흥미를 분리할 수 있다는 것이다.
이번 화면 안의 계수기의 처리는 useCounter의 사용자 정의 연결이 되었다.
결과적으로 UI와 논리가 분리되어 테스트도 쓰기 쉽다.
설명에 사용된 샘플 코드는여기.입니다.

바닥글 규칙 사용자 정의

사용자 정의 연결의 개요를 알고 규칙을 다시 확인하세요.
공식 홈페이지에서 말한 바와 같이 맞춤형 연결고리는 바닥글 규칙가 있다.
보충하면서 봅시다.

규칙 1.바닥글 최상위만 호출 가능

순환이나 조건 분기나 플러그인 함수에서 스크립트를 호출할 수 없습니다.반대로, React 함수의 최고 레벨만 호출하십시오.이것을 준수함으로써 구성 요소가 렌더링될 때마다 같은 순서로 호출될 수 있도록 합니다.이것은useState와useEffect를 여러 번 호출해도React가 연결 상태를 정확하게 유지할 수 있는 구조이다
사용자 정의 바닥글은 순환 조건문, 플러그인 함수에서 사용할 수 없습니다
실제로 해보세요.
방금 샘플 코드를 다시 쓰는 오류가 있습니다. 샘플 코드

const Home = () => {
    const [count, setCount] = useState<number>(0);
    const callUseCounter = () => {
        // 関数内での呼び出し 🙅
        const {current} = useCounter();
        console.log(current);
    };
    return <div>
        <div>現在の値(useState)：{count}</div>
        <DefaultButton onClick={() => setCount((prevCount) => prevCount + 1)}>
            +1 する
        </DefaultButton>
        <div>現在の値(useCounter)：{current}</div>
        <DefaultButton onClick={() => increment()}>+1 する</DefaultButton>
    </div>
}

함수에서 호출useCounter

const Home = () => {
  const [count, setCount] = useState<number>(0);
  if (count > 10) {
    return (
      <div>
        <div>現在の値(useState)：{count}</div>
        <DefaultButton onClick={() => setCount((prevCount) => prevCount + 1)}>
          +1 する
        </DefaultButton>
      </div>
    );
  } else {
    // 条件分岐内での呼び出し 🙅
    const { current, increment } = useCounter();
    return (
      <div>
        <div>現在の値(useState)：{count}</div>
        <DefaultButton onClick={() => setCount((prevCount) => prevCount + 1)}>
          +1 する
        </DefaultButton>
        <div>現在の値(useCounter)：{current}</div>
        <DefaultButton onClick={() => increment()}>+1 する</DefaultButton>
      </div>
    );
  }
};

조건을 분리한 후 사용useCounter은 규칙에 위반된다.
그나저나 이런 규칙 위반 코드를 썼다면ESLint 규칙을 강제하기 위해 다음과 같은 경고를 보냈다.

React Hook "useCounter" is called conditionally. 
React Hooks must be called in the exact same order in every component render.
Did you accidentally call a React Hook after an early return?(react-hooks/rules-of-hooks)

왜 똑같은 순서로 해요?

useState의 코드를 보면 쉽게 알 수 있다.

  const [name, setName] = useState('名前');
  const [address, setAddress] = useState('住所');
  const [age, setAge] = useState('年齢');

예를 들어, 3개state가 있다고 가정합니다.
ReactuseState의 호출은 名前입니까 아니면 住所年齢입니까?
어떻게 판단할까요?
"React는 낚싯바늘로 불리는 순서에 의존한다"(공식 발췌문).
고리의 순서 고정이라고 불리면 로컬에서 지정할 수 있다state.
그래서'똑같은 순서로 불러야 돼요'.
결과적으로, "순환이나 조건 분기나 중첩 함수에서 스크립트를 호출할 수 없습니다."라고 설명했다.

규칙 2.함수 구성 요소나 사용자 정의 연결에서 호출

일반 JavaScript에서 호출할 수 없습니다.
함수 구성 요소나 사용자 정의 스크립트에서 호출해야 합니다

규칙 3."use"로 시작하고 이어서 대문자 함수입니다.

"use"시작 후 대문자 함수 없이 사용자 정의 연결할 수 없습니다

export const usehello = () => {
  // usehello は 🙅
  // useHello は 🙆
  const [name] = useState("taro");
  return name;
};
export const hoge = () => {
  // hoge は 🙅
  // useHoge は 🙆
  const [name] = useState("hoge");
  return name;
};

샘플 코드에서 확인할 수 있습니다.ESLint usehello와 hoge 방법에 대해 규칙을 강제하기 위해 다음과 같은 경고를 보냈다.

React Hook "useState" is called in function "usehello" that is neither a React function component nor a custom React Hook function. 
React component names must start with an uppercase letter. (react-hooks/rules-of-hooks)

더 많은 사용자 정의 고리를 만져보세요.

다음은 사용자 정의 낚싯바늘awesome リスト(특정 주제를 순환하는 창고에 사용됨)를 소개한다.

awesome-react-hooks

사이트 목록에도 소개되어 있다react-use라는 사용자 정의 연결집도 코드 도서로 추천한다.

react-use / DEMO

최후

어때?
사용자 정의 낚싯바늘을 사용하면 복잡해지기 쉬운 거대한 구성 요소도 흥미를 분리하고 시야가 좋은 코드가 된다.아직 사용하지 않은 사람은 간단한 곳에서부터 사용할 수 있다.
이 기사를 좋아하시는 분들은 아래 하트 모양을 눌러주시면 좋을 것 같아요.
각주
연결고리가 클래스 용례의 모든 것을 덮어썼습니까? ↩︎