forms valiadtion을 더 쉽게
이번 프로젝트에서는 input이 굉장히 많을 것이다. number, text, select... 등 금액이 들어가는 input이 많고 주민등록번호, 핸드폰 번호.. 등. 그리고 그 값이 필수값이여야 하는지 optional 한 것인지도 결정해주어야 할 것들이 많다.
더 간편하게 이러한 기능들을 구현하고자 react-hook-form 을 사용하기로 했다. 기존까지의 프로젝트에서는 주로 formik을 써왔는데 이번에는 이것을 쓰게 됐다. 제공하는 기능이나 원리는 대체로 비슷한 것 같다.
react-hook-form을 쓰면 가장 좋은게 useState 의 개수가 적어지는 것이다. 보통 1개의 input이 있으면 대응되는 1개의 useState가 있다. input에 default 값을 지정해주거나 또는 수정하거나 초기화 하는 등의 작업이 필요하기 때문이다. 또한 input이 늘어나면 덩달아서 onChangeHandler도 같이 늘어난다. input의 event.target.value를 바라보고 있어야 하기 때문이다.
그래서 보통 이러한 보일러플레이트를 줄이고자 custom hooks을 만들어서도 사용한다. (예를 들면 useInput). 하지만 react-hook-form에서는 useForm 또는 Controller를 사용하면 보통 handler와 useState의 기능을 내장한 여러 api를 제공한다.
이러한 점이 가장 편한 것 같고, 또한 required에 대한 helper message를 쉽게 구현 할 수 있고, input에 대한 vaildation을 쉽게 구현 할 수 있다. validation이라고 한다면 '글자 수 제한' 이라던가 또는 필수값 선언 등이 있다.
조금 더 편하게
다만 input에 대한 format configuration은 별도로 지원하지 않는 것 같아서 이것은 react-number-format를 사용해보기로 했다. 아주 간단한 api로 input의 format을 설정 할 수 있다. 예를 들어 주민등록번호 input에 format="######-#######"이라고 코드를 넣어주면 input에 숫자를 넣었을 때 자동으로 설정한 format형태로 숫자가 기입되는 것을 알 수 있다. 별거 아닌 기능이지만, JS로 직접 구현하고자 한다면 생각보다 어렵게 느껴질 부분인 것 같다.
그리고 select은 기본적으로 html에서 제공하는 select과 option 은 디자인 수정이 까다로워서 디자인도 수정하고 더 편한 api를 사용하고자 react-select을 사용하기로 했다.
react-hook-form의 공식 document에서도 이 3가지의 패키지를 같이 사용하는 예시를 작성해둔 것으로보아 궁합은 잘 맞는 모양이다. 내일은 각 패키지의 공식문서를 더 참고해서 페이지 구현을 마쳐야 겠다!
