Compound Component 패턴으로 UI 확장성 극대화
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

제목

🚀 단순한 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 패턴을 선택하세요