Custom Hooks

커스텀 훅 제작

• 커스텀 훅을 제작해서 자주 사용되는 state 조정 관련 함수들을 함께 리턴해 중복적인 사용을 줄인다.

useInput

import { useState } from "react";

type validatorType = (value: string) => boolean;

const useInput = (
  initialValue: string,
  validator: validatorType = () => true //기본 validator를 true로 설정
) => {
  const [value, setValue] = useState(initialValue);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { value },
    } = event;
    if (validator(value)) setValue(value);
    else setValid(false);
  };

  return { value, onChange, setValue };
};

export default useInput;

• Input 태그를 사용할 때 자주 사용되는 onChage함수를 리턴하도록 설정
• validate 함수를 두번째 인자로 받아서 input값을 제한할 수 있다.

활용 예시

export default App(){
  const { value, setValue, onChange } = useInput("hi", (value)=>{value.length>30}));

  return <input value={value} onChange={onChange}><input/>
}

• 이제 따로 onChange를 만들어줄 필요가 없다.