HTML 표준 기반 추상화로 React Form Boilerplate 제거 및 상태 관리 단일화

Context

Formik 및 react-hook-form 사용 시 제품 로직보다 라이브러리 설정 및 Tooling에 과도한 공수가 발생하는 병목 현상 발생. 특히 Dependent Fields 처리 시 Form 외부에서 useState와 useEffect를 이용한 수동 상태 동기화로 인해 코드 복잡도가 증가하는 구조적 한계 노출.

Technical Solution

• HTML 표준 속성을 그대로 전송하는 Props Forwarding 구조를 통해 React 컴포넌트와 Native Input 간의 간극 제거
• fetchDeps와 fetch 함수를 통한 Dependency Tracking 메커니즘을 Form 내부 상태로 통합하여 외부 useState 의존성 제거
• dispatchChanges API를 도입하여 Option 리스트나 Loading 플래그 등 UI 메타데이터를 Field State에 직접 병합하는 구조 설계
• Client-side Validation 로직을 Server Action 실행 전 단계에 배치하여 Invalid Submit을 사전에 차단하는 가드레일 구축
• Web과 Mobile(React Native) 간 동일한 API 인터페이스를 공유하는 추상화 레이어 구현으로 플랫폼 간 개발 경험 통일
• Render Prop 패턴의 element 속성을 활용하여 Form State 접근을 위한 복잡한 Resolver 설정 없이 직접적인 UI 제어 가능