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

인프랩 프론트엔드 팀은 IT 채용 플랫폼 랠릿의 프로필·지원서 기능에서 발생하는 심각한 렌더링 문제를 해결하기 위해 react-hook-form을 도입했다. 기존에는 colocation과 ref를 사용해 대응했으나, 상태 분산으로 인한 데이터 동기화 문제와 복잡한 상태 관리 구조라는 한계가 있었다.

react-hook-form 도입을 통해 얻은 주요 이점은 다음과 같다.

• 렌더링 및 동기화 해결: 비제어 컴포넌트 방식을 활용해 렌더링 성능을 최적화하면서도, useFormContext를 통해 props drilling 없이 데이터를 일관되게 관리할 수 있게 되었다.
• 코드 단순화 및 유지보수성 향상: 기존에 Recoil, Context API, local state, ref로 파편화되어 있던 상태 관리 로직을 useFormState와 handleSubmit 등으로 통합했다. 이 과정에서 전체 코드 라인이 약 6,977라인 수정되는 극적인 효과를 거두었다.
• 개발 생산성 증대: class-validator 지원을 통해 데이터 유효성 검증 로직을 간결하게 구현할 수 있게 되었으며, 전역 상태 관리 도구의 의존도를 낮춰 유지보수 비용을 절감했다.