18 lines
958 B
Markdown
18 lines
958 B
Markdown
# 🏗️ [LEVEL 3] 컴포넌트 아키텍처: 벽돌 쌓기에서 성 짓기로
|
|
|
|
## 1. Props Drilling을 멈춰라!
|
|
- 할아버지가 손자에게 데이터 주려고 아빠, 삼촌을 거쳐가는 코드는 죄악이다.
|
|
- **해결책**: `Context API`를 쓰거나, **Component Composition(컴포넌트 합성)**을 사용하라.
|
|
- 아예 `<Layout content={<GrandChild />} />` 처럼 자식을 통째로 넘겨라.
|
|
|
|
## 2. 관심사의 분리: Container-Presenter 패턴
|
|
- **Container**: 데이터 가져오기, 로직 처리. (머리)
|
|
- **Presenter**: CSS, 스타일, 데이터 보여주기. (몸통)
|
|
- **효과**: 스타일만 바꾸고 싶을 때 로직 코드를 안 봐도 된다.
|
|
|
|
## 3. Atomic Design 맛보기
|
|
- `Atom`: 버튼, 입력창 (가장 작은 단위)
|
|
- `Molecule`: 검색바 (Atom의 결합)
|
|
- `Organism`: 헤더, 푸터 (복잡한 구조)
|
|
- **기준**: 아톰은 프로젝트 어디서든 쓰일 수 있게 **순수(Pure)**해야 한다.
|