[TIL] changeEvent

const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setChange(event.target.value);
  };

 

typeScript에서 이렇게만 input 에 썼었는데 

 

export default function useInput() {
  const [value, setValue] = useState("");

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return { value, setValue, onChange };
}

 

이렇게 따로 커스텀 훅인 useInput을 정의해서 선언했더니 다른 페이지에서 가져오기가 훨씬 편하고, 코드가 깔끔해졌다.

 

 

const {
    value: edit,
    onChange: onChange,
    setValue: setState,
  } = useInput();