사용자 지정 바닥글 사용

React에서는 자체 정의 연결을 통해 촘촘하게 쓸 수 있다.
구성 요소 사이에 같은 연결을 사용할 수도 있습니다.

컨디션

React16.이후

사용법

사용자 정의 스크립트를 정의할 때 "use"로 시작합니다.이것은 정의된 낚싯바늘이 갈고리인지 함수인지 확인하는 데 사용되는 규칙이다.
아래와 같다.네.
문장 앞에 쓰다React의 함수 내에서 호출합니다

사용 예

4

// useTextというカスタムフックスを定義する
const useText = () => {
  const [text, setText] = useState<string>("");
  const [list, setList] = useState<string[]>([]);

  const onChangeText = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };
  return { text, list, onChangeText};
};  

  export default function Home() {

  const { text, list, onChangeText } = useText();

  return (
    // なんらかの処理
    // 呼び出すときはtext,list,onChangeTextをそれぞれそのまま呼び出します。
  )

사용자 정의 낚싯바늘을 가져왔지만return 문장에서도 특별한 수정을 하지 않기 때문에 변경은 최소한으로 하면 된다.

참고 자료

바닥글 규칙
https://ja.reactjs.org/docs/hooks-custom.html