프론트엔드
조합형 Form 컴포넌트 설계
두줄요약
React Hook Form과 MUI 기반 폼 컴포넌트의 확장 한계를 설명했습니다. 역할 분리와 Composition Pattern으로 복합 입력 UI와 유지보수성을 개선한 사례입니다.
문제 상황
- React Hook Form과 MUI 기반의 공통 Field 컴포넌트가 단일 입력에는 유용했지만 복합 UI에서 레이아웃과 검증 처리가 깨짐
- 입력 옆 버튼, 범위 입력처럼 여러 요소가 하나의 의미를 갖는 화면에서 우회 구현과 하드코딩이 발생
- 하나의 컴포넌트에 Label, Controller, Validation, HelperText가 과도하게 결합된 구조
원인 분석
- 단일 Field가 너무 많은 책임을 떠안는 Monolithic 구조
- 개별 입력 단위 중심 설계로 그룹 단위 UX와 에러 표시를 자연스럽게 묶기 어려움
- 확장 요구가 늘수록 공통 컴포넌트만으로 대응하기 어려운 구조
해결 방법
- 역할을 Field, Field.Label, Field.Control, Field.HelperText로 분리하는 Composition Pattern 적용
- Field.Group을 도입해 시작값/종료값 같은 여러 입력을 하나의 필드 단위로 관리
- 기존 컴포넌트를 조합해 태그 입력 등 새로운 UI를 전용 컴포넌트 추가 없이 구성
적용해볼 점
- 단일 책임과 조합 가능성을 함께 고려한 Form 컴포넌트 설계
- 복합 입력, 그룹 입력, 에러 메시지 위치까지 포함한 UI 확장성 점검
- 공통 컴포넌트 우회 구현이 늘어날 때 구조 재검토