react-hook-form을 선택한 이유와 적용 과정

https://tech.inflab.com/202207-rallit-form-refactoring/react-hook-form/ 인프랩의 홍시님이 작성한 IT 채용 플랫폼 랠릿의 프로필·지원서 기능을 react-hook-form으로 리팩토링한 경험을 공유한 글입니다. [목차] 1. react-hook-form 도입 이유 1-1. 렌더링 이슈, 동기화 문제 해결 1-2. 여러가지 유틸과 코드 단순화 1-3. class validator 지원 1-4. 코드의 일관성 확보 2. react-hook-form 도입 과정 2-1. 전략 2-2. react-hook-form 적용 과정에서의 이슈 2-2-1. register 2-2-2. 배열 관리 - useFieldArray 2-2-3. Dev tool 2-2-4. File input 컨트롤하기 (미리보기) [react-hook-form 도입 이유] ... react-hook-form은 기본적으로 비제어 컴포넌트 방식으로 구현되어있기에 렌더링 이슈를 해결하면서도, 폼의 데이터와 상태를 Provider 아래라면 어느 곳에서든지 props drilling 없이 사용이 가능합니다. [react-hook-form 트러블 슈팅] ...이미 자체 개발한 디자인 시스템을 쓰는 경우, 비제어 방식으로 사용하기 위해 `ref` 대신에 `Controller`를 써서 요소를 제어할 수 있었습니다. [배열 관리 - useFieldArray] ...useFieldArray는 index대신 key로 사용할 수 있는 유니크 id를 자동으로 생성해줍니다.