[P-Reinforce] Substantial Body Content Added to 15-Level React Mastery Wiki

Component_Design_Patterns.md

@@ -5,13 +5,24 @@ tags: [Design Pattern, Atomic Design, Composition, Architecture]
 created: 2026-04-20
 ---
 
-# 컴포넌트 설계 패턴
+# [[Component_Design_Patterns]] (컴포넌트 설계 패턴)
 
-## 🧩 구조 설계
-1.  **Atomic Design**: Atom(최소 단위) -> Molecule -> Organism -> Template -> Page 순으로 조립.
-2.  **Container-Presenter**: 로직 담당과 UI 담당의 분리.
-3.  **Component Composition**: Props Drilling을 방지하기 위해 자식을 통째로 넘기는 전략.
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 컴포넌트는 작을수록 강하고, 단순할수록 재사용성이 극대화된다. 복잡한 컴포넌트는 여러 개의 작고 순수한(Pure) 컴포넌트로 해체하라.
 
-## 🔗 연결된 지식
-- [[Project_Architecture_Guidelines]]
-- [[Styling_Governance]]
+## 📖 구조화된 지식 (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]]