Component_Design_Patterns (컴포넌트 설계 패턴)

📌 한 줄 통찰 (The Karpathy Summary)

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

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이 프로젝트 전반에서 동일한 디자인 언어인 '디자인 토큰'을 반영하게 한다.

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