🙈 Prologue

회사에서 react-hook-form을 통해 form을 최적화해보라고 하여 한 번 사용해보았는데, 기록을 위해 주관적인 사용 경험들을 정리해보았습니다.
공식 문서

1. 장점

• 일단 렌더 수가 급감. 기존에 모든 input value를 state로 제어했을 때에는 input값이 변화할 때마다 리렌더가 되었는데 렌더수가 줄었고 빨라짐.
• 코드가 굉장히 간결하고 직관적이 되었다!
• ts로는 안썼지만 ts도 지원한다고 한다 !

추후 해볼 것

• 라이브러리 안 쓰고 form 성능 향상 해보기(ref를 통한 DOM 이벤트 조작? 렌더 수 줄일 수 있는 방식으로.. ) 그래야 이 라이브러리의 동작 방식과 필요 여부를 좀 더 명확하게 파악할 수 있을 것 같다

2. 어떨 때 쓰면 좋을지

• 솔직히 form 관련된 영역에서 사용하면 정말 편리할 거 같다 (직관적, 코드 간결, 성능 향상 등등)
• 디바운싱이 필요한 검색창 등의 기능이 아니라면(모든 변경을 구독해야하는 그런 상황이 아니라면) input 데이터를 한번에 post하는 상황에서 유용할 거 같다

3. 고민했던 영역

• reactstrap의 <Input type="checkbox">와 html테그의 <input type="checkbox">의 동작방식이 달라 고민을 많이 했다. html테그의 (<input type="checkbox">)는 체크 여부에 따라 value값이 true / false로 나뉘었는데 reactstrap은 체크 여부와 관계 없이 value값이 계속 on이었다
• 처음엔 그럼에도 reactstrap의 <Input type="checkbox"> 자체의 value로 제어하려고 했고, 그걸 고민하는 과정에서 시간을 엄청 썼다. 그런데 어떻게 해도 안돼서 e.target.checked 여부를 가지고 useForm으로 보내는 resister에 새롭게 setValue를 하였고 그렇게 이 문제를 해결할 수 있었다
• 공식문서를 보고 쓸 수 있는 기능들을 제대로 파악하는 것이 필요할 것 같다. 무조건 테그의 자체 value값을 바꾸지 않아도, useForm에서 제공해주는 부분들을 통해 resister의 value를 새롭게 setValue할 수 있는 건데 공식문서를 제대로 파악하지 않아서 삽질을 오래했던 것 같다.