React Hook Form

 

불필요한 렌더링을 줄인다.

가 핵심인 것 같다.

 

바닐라 자바스크립트로 form을 짜면 validation을 위해 너무 많은 state가 필요하다.

 

useForm()의 비구조화 할당으로 나오는 변수 중 기본적이고 자주 쓰는 것 3가지는

register, handleSubmit, reset

 

 

register

<Input
  register={register("email", {required: true,})}
  name="email"
  label="Email address"
  type="email"
  required
/>

 

https://react-hook-form.com/docs/useform/register

useForm - register

 

handleSubmit은 폼 유효성 검사가 성공적이면 폼의 데이터를 가져온다. 공식문서를 보자.

https://react-hook-form.com/docs/useform/handlesubmit

 

reset은 말 그대로 폼의 input value를 리셋시켜준다.

const { register: tokenRegister, handleSubmit: tokenHandleSubmit ,reset } = useForm<TokenForm>();