make custom hook by react

front 폴더 아래 hooks 라는 폴더를 생성하고 useInput.ts 파일을 생성합니다.

customhook 은 반복되는 상태 관리 코드를 줄이려고 할때 사용합니다.

mkdir hooks && touch useInput.ts

useInput.ts

import React, { useCallback, useState } from "react";

const useInput = (initalData: any) => {
  const [value, setValue] = useState(initalData);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler, setValue];
};

export default useInput;

signup/index.tsx

const SignUp = () => {
  const [email, setEmail] = useState("");
  const onChangeEmail = useCallback((e) => {
    setEmail(e.target.value);
  }, []);

다음과 같은 코드를 커스텀 훅으로 변경하기

import useInput from "@hooks/useInput";
const SignUp = () => {
  const [email, onChangeEmail, setEmail] = useInput("");

다음과 같이 변경할 수 있습니다.