프론트엔드
합성 컴포넌트로 재사용성 극대화하기
두줄요약
Dialog의 prop 증가와 고정된 요소 배치 문제를 합성 컴포넌트로 개선했습니다. 서브 컴포넌트를 조합해 복잡한 Dialog 요구사항에 유연하게 대응했습니다.
문제 상황
- Dialog 기능 확장에 따른 prop 수 증가와 컴포넌트 복잡도 누적
- 요소 순서·배치 변경마다 조건 분기와 기존 사용처 사이드이펙트 우려
구조와 흐름
- Dialog 제목·설명·체크박스·버튼 등을 독립 서브 컴포넌트로 분리
- 메인 Dialog에서 children을 분류해 Dimmed·본문·하단 버튼 영역 배치
- Object.assign 기반
Dialog.Title,Dialog.CheckBox형태의 조합형 API 제공
선택 이유
- 사용처에서 필요한 요소와 순서를 직접 조합하는 선언적 UI 구성
- 복잡한 Dialog 변형에서 기존 Dialog 수정 없이 서브 컴포넌트 추가 가능
트레이드오프
- 단순한 Dialog는 prop 방식의 직관성과 스토리북 테스트 용이성
- 복잡하고 다양한 요구사항은 합성 컴포넌트의 유연성과 재사용성 우위
