react hook form에서 이벤트 사용하기

들어가며

이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다.

 

폼을 구현하기 위해 react hook form을 사용했는데요.

input에는 onBlur, onChange, onClick, onKeyDown 이벤트를 사용했습니다.

 

다음과 같은 형태였죠.

 

<form
  onSubmit={handleSubmit(onValid)}
  onBlur={onFormBlur}
>
  <input
    type="text"
    required
    {...register('query', {
      required: true,
      minLength: 2
    })}
    placeholder="검색어를 입력해주세요."
    onChange={onInputChange}
    onBlur={onInputBlur}
    onClick={onInputClick}
    onKeyDown={onInputKeyDown}
  />
</form>;

 

문제

문제는 폼 제출이 안 된다는 겁니다.

응??

이벤트에 무슨 문제가 있나 싶어 하나씩 지워보며 확인한 결과 onChange를 지웠더니 정상 작동이 되는 걸 확인했습니다.

이상한 점은 onChange 이벤트 핸들러 내부 로직을 지우고 등록만 해도 문제가 발생했다는 거죠.

 

솔루션

이곳저곳 찾아보니 다음과 같은 내용을 발견할 수 있었습니다.

 

react hook form Ver 7.16부터는 onBlur와 onChange 핸들러를 register 내부에 작성해야 한다고 합니다.

 

<input
  type="text"
  {...register('test', {
    onChange: (e) => {},
    onBlur: (e) => {},
  })}
/>

 

그래서 아래와 같이 코드를 수정하니 정상적으로 작동했습니다.

 

<form
  onSubmit={handleSubmit(onValid)}
  onBlur={onFormBlur}
>
  <input
    type="text"
    required
    {...register('query', {
      required: true,
      minLength: 2,
      onChange: onInputChange,
      onBlur: onInputBlur
    })}
    placeholder="검색어를 입력해주세요."
    onClick={onInputClick}
    onKeyDown={onInputKeyDown}
  />
</form>;

 

마치며

react hook form 사용 시 onBlur와 onChange 핸들러는 register 내부에 따로 작성해야 하는 줄 몰랐는데요.

공식 문서를 더 잘 찾아봐야겠습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.

 

Reference

https://github.com/react-hook-form/react-hook-form/releases/tag/v7.16.0

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