통합 요약노트
Ch.25 컴포넌트 설계 — 재사용 가능한 UI
설계 원칙, 합성 패턴, AI에게 컴포넌트 시키는 법
이 챕터의 내용
좋은 컴포넌트의 조건
컴포넌트 설계 원칙을 알면, AI에게 명확한 명세를 줄 수 있고 일관된 결과를 받을 수 있습니다.
좋은 컴포넌트는 한 가지 일만 합니다
Props는 컴포넌트의 사용 설명서입니다
같은 UI가 3번 반복되면 컴포넌트로 분리하세요
합성 패턴 — children과 슬롯
합성(Composition) 패턴을 쓰면, 틀은 고정하고 내용만 자유롭게 바꿀 수 있습니다.
children은 컴포넌트 안에 무엇이든 넣을 수 있는 구멍입니다
children이 구멍 하나라면 슬롯은 구멍이 여러 개입니다
합성 패턴으로 만드는 실전 컴포넌트 3가지
AI에게 컴포넌트 시키는 법
컴포넌트 명세서 — Props 인터페이스 + 디자인 토큰 + 변형 목록을 미리 정의해주면 됩니다.
AI에게 설계도를 주면 결과가 확 달라집니다
디자인 토큰은 색상·크기·간격의 변수화입니다
이 프롬프트 템플릿으로 AI 결과물 퀄리티가 확 오릅니다
핵심 용어 모음
단일 책임
하나의 컴포넌트는 하나의 역할만. Button은 버튼만, Modal은 모달만
재사용성
같은 컴포넌트를 여러 곳에서 쓸 수 있어야. 색상·크기는 Props로 변경
예측 가능성
같은 Props를 주면 항상 같은 결과. 숨겨진 동작 없이 투명하게
필수 Props
없으면 컴포넌트가 동작하지 않는 값. label, onClick 등
선택 Props (?)
기본값으로 대체 가능한 값. variant, size 등
children
컴포넌트 내부 콘텐츠를 외부에서 자유롭게 결정
기본값 패턴
variant = "primary" 같은 기본값으로 사용 편의성 향상
Props 인터페이스
타입 정의로 AI가 만들어야 할 API를 확정
Variants (변형)
primary, secondary 같은 시각적 변형 목록
States (상태)
default, hover, disabled, loading 등 상태별 모습
사용 예시
실제 사용 코드를 보여주면 의도가 명확해짐
비교 정리
| 항목 | 분리해야 할 때 | 합쳐도 되는 때 |
|---|---|---|
| 반복 | 같은 UI 패턴이 3곳 이상 | 1~2곳에서만 사용 |
| 복잡도 | 하나의 컴포넌트가 200줄 이상 | 50줄 이내의 간단한 로직 |
| 독립성 | 다른 맥락에서도 재사용 가능 | 이 페이지에서만 쓰이는 고유 UI |
| 항목 | children만 | 슬롯 패턴 |
|---|---|---|
| 구멍 수 | 1개 (children) | 여러 개 (header, footer 등) |
| 적합한 경우 | 단순 래퍼 (Card, Container) | 영역이 나뉜 UI (Dialog, Page) |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기