제목
🚀 단순한 UI도 확장 가능하게: Compound Component 패턴 사용 후기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, React 프레임워크 사용자
난이도: 중급 (React 기초 이해 필수)
핵심 요약
- Compound Component 패턴은 유연한 UI 구조와 재사용성을 동시에 달성할 수 있는 핵심 디자인 패턴
Object.assign()
을 활용한 하위 컴포넌트 동적 조합 방식으로 상위/하위 컴포넌트 간 결합도 최소화Result.Image
,Result.Title
등의 논리적 구성 요소 분리로 확장성과 유지보수성 향상
섹션별 세부 요약
###1. 문제 정의 및 요구사항
- 공통 레이아웃 + 내용만 달라지는 구조 필요
- 변경 가능성 (예: 버튼 추가) 및 부분적인 사용 가능성 (예: 디스크립션 생략)
- 의존성 없는 컴포넌트 설계 요구
###2. Composition vs Inheritance 비교
- 상속은 강한 의존성과 재사용성 저하
- 합성은 독립성과 확장성을 동시에 달성
- React 공식 문서: "상속 대신 합성을 사용하여 컴포넌트 간 코드 재사용을 권장"
###3. Compound Component 패턴 구현
ResultMain
에 하위 컴포넌트(Image
,Title
,Description
)를Object.assign()
으로 동적 조합- TypeScript 타입 정의를 통해 하위 컴포넌트 타입 명시
RESULT_IMG_MAP
상수를 통해 아이콘 매핑 관리
###4. 패턴 적용 조건
- 다양한 내부 구조 조합 필요 시 (예:
Dialog
,Form
) - 협업 시 명확한 구조 제안 필요 시 (예:
Tabs.TabList
,Tabs.TabPanel
) - 하위 컴포넌트 간 상태 공유 필요 시 (예: 탭 전환)
결론
Object.assign()
을 활용한 하위 컴포넌트 동적 조합 방식이 직관적이고 확장성 있는 구현에 유리- 단순한 prop 기반 컴포넌트보다 Compound Component 패턴이 복잡한 UI 로직에 적합
- "의존성 없는 구조"와 "확장 가능성"이 핵심 요구사항일 때 Compound Component 패턴을 선택하세요