합성 컴포넌트로 재사용성 극대화하기
프론트엔드
합성 컴포넌트로 재사용성 극대화하기
두줄요약
확장되는 Dialog 요구사항에서 prop 증가와 고정된 배치의 한계를 분석했습니다. React 합성 컴포넌트로 유연한 조합과 재사용성을 확보하는 방법을 소개합니다.
문제 상황
- Dialog 요구사항 확장에 따른 prop 수 증가와 컴포넌트 복잡도 상승
- 요소 순서와 배치를 구현 시점에 고정하는 prop 기반 구조의 유연성 부족
구조와 흐름
- Dialog의 제목·설명·체크박스·버튼을 독립적인 서브 컴포넌트로 분리
- 메인 컴포넌트의 Portal 렌더링과 children 분류로 콘텐츠·하단 버튼·Dimmed 배치
- Object.assign 기반
Dialog.Title,Dialog.CheckBox형태의 묶음 export
선택 이유
- 사용하는 곳에서 필요한 서브 컴포넌트와 순서를 직접 조합하는 선언적 UI 구성
- 중간 설명 삽입 등 요구사항 변화 시 기존 Dialog 내부 수정 최소화
트레이드오프
- 단순한 Dialog는 prop 방식이 더 직관적이고 스토리북 테스트에 용이
- 복잡하고 다양한 조합이 필요한 Dialog에서 합성 컴포넌트의 재사용성과 유연성 우위
