[G1-Sync] Manual knowledge update
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: 컴포넌트 설계 패턴 (Atomic & Composition)
|
||||
category: Software Architecture
|
||||
tags: [Design Pattern, Atomic Design, Composition, Architecture]
|
||||
category: Software [[Architecture]]
|
||||
tags: [Design Pattern, [[Atomic Design]], Composition, Architecture]
|
||||
created: 2026-04-20
|
||||
---
|
||||
|
||||
@@ -12,9 +12,9 @@ created: 2026-04-20
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **Container-Presenter 패턴**:
|
||||
- **Container**: 데이터(State, API)를 가져오고 관리하는 '머리'.
|
||||
- **Container**: 데이터([[State]], API)를 가져오고 관리하는 '머리'.
|
||||
- **Presenter**: 오직 Props만 받아 화면을 그리는 '몸통'. 스타일과 UI 구조에만 집중하여 테스트 가능성을 높인다.
|
||||
- **Compound Components (복합 컴포넌트)**:
|
||||
- **[[Compound Components]] (복합 컴포넌트)**:
|
||||
- `<Select><Option /></Select>` 처럼 부모와 자식이 상태를 공유하며 하나의 긴밀한 기능을 수행하는 패턴. 사용자가 UI 구조를 자유롭게 배치할 수 있게 유연성을 제공한다.
|
||||
- **Atomic Design (원자 중심 설계)**:
|
||||
- Atom(버튼, 입력창) $\rightarrow$ Molecule(검색바) $\rightarrow$ Organism(헤더) $\rightarrow$ Template $\rightarrow$ Page.
|
||||
|
||||
Reference in New Issue
Block a user