react-hook-form 을 통한 쉬운 form 양식 핸들링

 

프로젝트의 구성상 테이블이 많다고 했었는데, 이런 테이블에 뿌려질 데이터를 조회하는 UI를 제공하기 위해서 많은 조건들이 필요하다.

예를 들면

 

• 고객사
• 상품명
• 상태
• 상품코드
• 카테고리
• 규격정보
• 유효기간

등등 대부분 페이지에서 조건이 3가지 이하인 경우가 없을 정도다.

 

일반적으로 회원가입 페이지나 로그인 페이지의 양식을 개발하는데 많이 쓰이는 react-hook-form 이지만

내가 개발해야하는 검색 페이지에서 폼 태그 안에서 사용되는 필드값이 많기때문에 일일히 state로 관리하는 것보다

react-hook-form을 사용했을때 코드량과 코드정리가 깔끔하게 할 수 있기 때문에 react-hook-form을 사용하였다.

 

기본 사용법에 알아본 포스팅이 있으니 아래 첨부

React - react hook form