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("");
다음과 같이 변경할 수 있습니다.