#7. 회원가입 유효성 검사 (react-hook-form)

#7-0 들어가는 말

 기존에 작성한 회원가입 폼의 유효성 검사기능을 보완하려던 차에 react-hook-form이 있다는걸 알게 되었다. react-hook-form을 이용하는게 기존 코드의 양도 줄일 수 있고, 좀 더 잘 짜여진 기능을 빠르게 가져다 쓸 수 있을거 같아 한번 적용시켜 보았다. 

---

#7-1 react-hook-form 이용후기

먼저 npm install react-hook-form을 하여 설치한 후에 공식 홈페이지(https://react-hook-form.com/kr/get-started/)에 안내된 대로 실행해 보았으나 "Uncaught TypeError: path.split is not a function" 란 에러가 떴다.검색해보니 여러 해결방법 중 react-hook-form 버전을 6으로 낮추면 된다고 해서 다시 npm install react-hook-form@6으로 재설치 후 진행하였다. 

 

공식 홈페이지에 한국어 버전도 있어서 handleSubmit, register, watch, errors 등 여러기능을 쉽게 잘 이용할 수 있었다. 예를 들어, handleSubmit으로 폼의 onSubmit 이벤트를 실행하면 e.preventDefault( )를 굳이 적지 않아도 이와 같이 동작되고, register의 validate 속성을 통해 '비밀번호'와 '비밀번호 확인'의 문자가 동일한지도 쉽게 확인할 수 있다. 

 

나중에 마저 약관동의 체크박스도 react-hook-form을 이용해 수정해봐야겠다. 일단 오늘은 여기까지 회원가입 유효성 검사기능을 수정 끝.