FormProvider와 useFieldArray로 구현하는 확장 가능한 폼 아키텍처

Context

대규모 단일 페이지 폼은 유효성 검증과 디버깅이 매우 까다로운 구조. Next.js App Router 환경에서 경로 전환 시 폼 상태를 유지하는 설계적 어려움 존재. 복잡한 비즈니스 로직을 포함한 폼의 유지보수성 저하 문제 발생.

Technical Solution

• FormProvider 패턴을 도입하여 하위 컴포넌트 트리 전체에 공유 컨텍스트를 주입하는 구조
• useFormContext를 활용해 Prop Drilling 없이 깊은 단계의 자식 컴포넌트가 폼 상태와 메서드에 직접 접근하는 방식
• useFieldArray와 Object Path Notation(experience.${index}.years)을 결합하여 동적 배열 데이터의 정밀한 상태 업데이트 구현
• valueAsNumber 옵션을 적용하여 HTML input의 기본 문자열 값을 TypeScript 스키마에 맞는 숫자 타입으로 강제 변환하는 전략
• 부모 컴포넌트는 전체 폼의 오케스트레이터 역할만 수행하고 각 도메인(개인정보, 경력 등)이 UI 로직을 독립적으로 관리하는 디커플링 설계

Key Takeaway

폼의 상태 관리 로직을 중앙 집중식 컨텍스트로 분리하고 도메인별로 UI를 캡슐화함으로써 확장성과 유지보수성을 동시에 확보하는 설계 원칙.