프론트엔드
React Form 컴포넌트 개발기
두줄요약
대규모 React 폼에서 렌더링 성능과 상태 분산 문제를 해결하려는 과정을 정리했습니다. 여러 상태 관리 방식을 비교하고 react-hook-form 도입 방향을 결정했습니다.
문제 상황
- 최대 700여 개 입력창을 포함한 이력서 폼에서 change 이벤트마다 발생하는 리렌더링과 UX 저하 우려
- 유효성 검사, 동적 추가·삭제, 순서 변경이 필요한 복잡한 폼 요구사항
구조와 흐름
- 초기 useState 기반 단일 profile 상태 관리와 전체 폼 리렌더링 문제
- Form Control별 상태 분리와 비제어 컴포넌트·form element 직접 접근을 통한 렌더링 감소
- 입력값·유효성·동적 폼 구조·API 요청 데이터의 분산 관리로 인한 복잡도 증가
트레이드오프
- Redux의 선택적 구독 장점과 폼 로컬 상태의 전역 store 관리 및 보일러플레이트 부담
- MobX의 유연성과 팀 공통 아키텍처·학습 숙련도 부족 우려
- React.memo 기반 단일 상태 관리의 단순성과 context·props 메모이제이션 한계
선택 이유
- 폼 데이터의 단일 출처 관리와 불필요한 렌더링 최소화 필요성
- 여러 방식 검토 후 react-hook-form 도입 방향 결정
