# [[Component-Based Design|Component-Based Design]]

## 📌 Brief Summary
컴포넌트 기반 디자인(Component-Based Design)은 사용자 인터페이스를 재사용 가능하고 이식성이 뛰어나며 예측 가능한 모듈식 구성 요소로 구축하는 아키텍처 접근 방식입니다 [1, 2]. 이는 거대한 단일 컴포넌트를 구성하는 방식에서 벗어나, 조합(Composition)을 통해 레이아웃과 동작을 조립함으로써 '프롭 드릴링([[Prop Drilling|Prop Drilling]])'과 숨겨진 결합도를 줄입니다 [3-5]. 단일 책임 원칙과 명시적인 API 계약을 준수함으로써, 변화하는 요구사항에 유연하게 적응하고 확장할 수 있는 확장성 높은 UI 시스템을 구축하는 데 핵심적인 역할을 합니다 [6-8].

## 📖 Core Content
- **원자적 설계([[Atomic Design|Atomic Design]]) 계층 구조**: 사용자 인터페이스는 더 이상 분해할 수 없는 기본 요소인 원자(Atoms), 이들이 모인 분자(Molecules), 더 복잡한 유기체(Organisms), 구조를 정의하는 템플릿(Templates), 그리고 실제 콘텐츠가 채워지는 페이지(Pages)의 5단계로 체계화하여 설계할 수 있습니다 [9-12].
- **재사용성을 위한 핵심 원칙**: 훌륭한 재사용 가능 컴포넌트는 단일 책임(Single Responsibility) 원칙을 따르고, 상속보다는 조합(Composition)을 우선하며, 명확한 API 계약을 가져야 합니다 [8]. 내부 상태를 최소화하여 예측 가능성을 높이고, 접근성([[Accessibility|Accessibility]])을 기본적으로 내장해야 합니다 [8, 13].
- **프롭(Prop) 기반에서 조합(Composition) 기반 API로의 전환**: 모든 구성 옵션을 프롭으로 전달하는 방식은 컴포넌트를 변경하기 어려운 '블랙 박스'로 만들며 기하급수적인 복잡성을 초래합니다 [14-16]. 대신, 책임을 분산시켜 사용자가 필요에 따라 하위 요소를 조립하게 하는 조합 기반 접근 방식이 대규모 UI 확장에 유리합니다 [3, 5].
- **확장 가능한 컴포넌트 패턴**:
  - **복합 컴포넌트([[Compound Components|Compound Components]])**: React 컨텍스트를 활용하여 탭(Tabs)이나 아코디언(Accordion)과 같은 여러 컴포넌트가 암시적으로 상태를 공유하는 패턴으로, 프롭 비대화 없이 높은 레이아웃 조립 유연성을 제공합니다 [4, 16-18].
  - **헤드리스 컴포넌트([[Headless Components|Headless Components]])**: 복잡한 상태 관리와 논리만 캡슐화하고 UI 마크업과 스타일링은 온전히 소비자에게 위임하여, 특정 디자인 시스템에 구애받지 않는 유연성을 제공합니다 [16, 19, 20].
  - **렌더 프롭([[Render Props|Render Props]])**: 렌더링 함수를 자식이나 프롭으로 전달하여 논리를 공유하는 기법으로, 사용자에게 렌더링 결과에 대한 완전한 제어권을 줍니다 [16, 20, 21].
  - **오버라이드 패턴([[Overrides Pattern|Overrides Pattern]])**: 컴포넌트 내부의 하위 요소에 대한 식별자를 노출하여, 매번 새로운 프롭을 추가할 필요 없이 특정 내부 요소의 스타일이나 하위 컴포넌트를 깊게 커스터마이징할 수 있게 합니다 [16, 22, 23].
- **디자인 토큰([[Design Tokens|Design Tokens]]) 바인딩**: 컴포넌트는 하드코딩된 리터럴 값(예: `#dc2222`)을 피하고 디자인 토큰(예: `color.error`)을 참조하여 바인딩해야 합니다 [24, 25]. 이를 통해 간격, 색상, 타이포그래피 등의 디자인 요소가 변경될 때 시스템 전체에 일관된 업데이트가 자동으로 반영됩니다 [24].

## 🔗 Knowledge Connections
- **Related Topics:** [[Atomic Design|Atomic Design]], Compound Components, Headless Components, [[Design Tokens|Design Tokens]], [[Feature-Sliced Design|Feature-Sliced Design]]
- **Projects/Contexts:** [[Uber Base Web|Uber Base Web]], Shopify Polaris, [[Radix UI|Radix UI]]
- **Contradictions/Notes:** 원자적 설계(Atomic Design)는 시각적 일관성을 유지하는 데 효과적이지만, 복잡한 비즈니스 로직을 포함하는 컴포넌트를 엄격한 범주에 억지로 맞출 때 구조적 한계에 부딪힐 수 있으므로 실무에서는 기능(Feature) 기반 구조와 결합하여 사용하는 것이 권장됩니다 [26, 27]. 또한, 복합 컴포넌트 패턴은 소비자에게 막강한 유연성을 제공하지만, 너무 많은 자유를 허용하면 일관된 UI나 접근성이 훼손될 수 있으므로 디자인 시스템 차원에서 안전한 구성 경계(composition [[Boundaries|Boundaries]])를 문서화하는 것이 필수적입니다 [28, 29].

---
*Last updated: 2026-04-26*