React Hook Form

한동안 다루지 않다보니 잊고있었다..

input

input 영역의 event를 관리하기 위해서는
form 의 이벤트 핸들러 작동 방식을 변경해줘야 한다

최근 회사 지원자 중에 onChange를 적용하지 못했던 분이 계셨었는데
나도 코드를 보고 바로 인지하지 못했었다

useForm() mode

onSubmit 이벤트를 제출하기 전에 유효성 검사를 진행할 수 있다
useForm()의 Props로 mode에 대한 값을 넘겨주어야 한다
default 값은 onSubmit

onSubmit

onSubmit 이벤트가 발생하기 전까지는 유효성 검사를 하지 않다가 Submit 이벤트 발생 후 부터는 onChange 이벤트로 유효성 검사를 한다

onChange

첫 input 입력 시 부터 바로 onChange 이벤트로 유효성 검사를 한다

{ mode: 'onChange' } 형식으로 useForm의 인자로 넘겨준다

const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>({ mode: 'onChange' });

위와 같은 것을 form 태그 내에 onChange 이벤트로 바로 줄 수도 있지만 react-hook-form 에서 구현해놓은 렌더링 최적화를 적용받지 못할 것 같다