Antigravity Agent
29 lines
1.8 KiB
Markdown
29 lines
1.8 KiB
Markdown
---
|
|
title: 컴포넌트 설계 패턴 (Atomic & Composition)
|
|
category: Software [[Architecture]]
|
|
tags: [Design Pattern, [[Atomic Design]], Composition, Architecture]
|
|
created: 2026-04-20
|
|
---
|
|
|
|
# [[Component_Design_Patterns]] (컴포넌트 설계 패턴)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> 컴포넌트는 작을수록 강하고, 단순할수록 재사용성이 극대화된다. 복잡한 컴포넌트는 여러 개의 작고 순수한(Pure) 컴포넌트로 해체하라.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **Container-Presenter 패턴**:
|
|
- **Container**: 데이터([[State]], API)를 가져오고 관리하는 '머리'.
|
|
- **Presenter**: 오직 Props만 받아 화면을 그리는 '몸통'. 스타일과 UI 구조에만 집중하여 테스트 가능성을 높인다.
|
|
- **[[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]]
|
|
- Design: [[Accessibility_Inclusivity]]
|