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

문제 상황

• 수백 개 폼의 유효성 상태 변경에 따른 불필요한 리렌더링
• Recoil, Context API, 로컬 상태, DOM ref로 분산된 폼 데이터·에러 상태
• 복잡한 코드와 높은 유지보수·팀 커뮤니케이션 비용

선택 이유

• 비제어 컴포넌트 기반 폼 관리와 useFormContext를 통한 데이터·에러 단일 출처화
• useFormState, handleSubmit, Controller, useFieldArray 등 기존 구현 대체 유틸
• class-validator resolver를 통한 기존 검증 로직과 프론트엔드·백엔드 검증 규칙 연계

구조와 흐름

• FormProvider 아래에서 폼 데이터와 에러를 공유하고 섹션별 에러 UI·제출 데이터에 활용
• ref 전달 가능한 입력 요소에 register, 제어형·기존 ref 사용 컴포넌트에 Controller 적용
• 동적 배열에 useFieldArray의 id, append, update, remove 적용

주의할 점

• 점진적 마이그레이션 중 기존 코드와 신규 코드의 동작 원인 혼동 가능성
• useFieldArray 항목의 기본값 설정과 index 대신 고유 id 기반 key 사용
• DevTool의 E2E 테스트 화면 간섭 방지를 위한 비활성화