핵심 요약
인프랩이 react-hook-form 도입으로 렌더링 이슈를 해결하고 전역 상태 의존도를 줄여 코드가 대폭 간소화되며 유지보수성을 높인 경험을 공유합니다.
주요 경험
- 문제 배경과 해결 흐름: 다수의 폼 렌더링 이슈를 해결하기 위해 react-hook-form 도입을 추진하고, 기존 코드를 전부 대체하지 않는 점진적 마이그레이션 전략을 채택했습니다.
- 구현에 활용한 유틸리티: useFormContext, useFormState, useFieldArray, Controller, class-validatorResolver, DevTools 등을 활용해 비제어/제어 컴포넌트를 효과적으로 다루었습니다.
- 정량적 효과: 도입 이후 코드 수정 규모가 6,977라인으로 보고되었고, 대폭 감소하는 효과가 나타났습니다.
얻은 인사이트
- 단일 소스의 데이터 흐름으로 렌더링 비용을 줄이고 예측성을 높였습니다.
- 코드 라인 감소로 유지보수 비용과 신규 입사자 적응 비용이 감소하는 등 팀의 협업 효율이 개선되었습니다.
- 전역 상태 도구 의존도를 줄여 코드 일관성을 높이고, 향후 확장과 유지보수에 유리한 구성을 확보했습니다.
