---
title: 컴포넌트 설계 패턴 (Atomic & Composition)
category: Unified
tags: [Design Pattern, [[Atomic Design|Atomic Design]], Composition, Architecture]
created: 2026-04-20
---

# [[Component_Design_Patterns|Component_Design_Patterns]] (컴포넌트 설계 패턴)

## 📌 한 줄 통찰 (The Karpathy Summary)
> 컴포넌트는 작을수록 강하고, 단순할수록 재사용성이 극대화된다. 복잡한 컴포넌트는 여러 개의 작고 순수한(Pure) 컴포넌트로 해체하라.

## 📖 구조화된 지식 (Synthesized Content)
- **Container-Presenter 패턴**:
    - **Container**: 데이터([[State|State]], API)를 가져오고 관리하는 '머리'.
    - **Presenter**: 오직 Props만 받아 화면을 그리는 '몸통'. 스타일과 UI 구조에만 집중하여 테스트 가능성을 높인다.
- **[[Compound Components|Compound Components]] (복합 컴포넌트)**:
    - `<Select><Option /></Select>` 처럼 부모와 자식이 상태를 공유하며 하나의 긴밀한 기능을 수행하는 패턴. 사용자가 UI 구조를 자유롭게 배치할 수 있게 유연성을 제공한다.
- **Atomic Design (원자 중심 설계)**:
    - Atom(버튼, 입력창) $\rightarrow$ Molecule(검색바) $\rightarrow$ Organism(헤더) $\rightarrow$ Template $\rightarrow$ Page. 
    - 가장 하위의 Atom이 프로젝트 전반에서 동일한 디자인 언어인 '디자인 토큰'을 반영하게 한다.

## ⚠️ 모순 및 업데이트 (RL Update)
- 너무 과도한 컴포넌트 분할은 프로토타이핑 속도를 늦춘다. 처음에는 크게 짜고, 중복이 발생하거나 복잡도가 높아질 때 '사후적 리팩토링'을 통해 분리하는 것이 실무적으로 현명하다.

## 🔗 지식 연결 (Graph)
- Related: Project_Architecture_Guidelines , [[Styling_Governance|Styling_Governance]]
- Design: [[Accessibility_Inclusivity|Accessibility_Inclusivity]]
