2nd/01_Archive/2026-04-20/03_React-Architecture_Component-Patterns.md

🏗️ [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)**해야 한다.