react-atomic-pattern

React Atomic Design Pattern

React 컴포넌트를 Atomic Design 패턴에 따라 구조화하고 유지합니다.

핵심 개념

Atomic Design은 컴포넌트를 5가지 레벨로 계층화하여 재사용성과 유지보수성을 극대화하는 디자인 시스템입니다.

레이어 계층 구조

Pages (최상위)
  ↓
Templates
  ↓
Organisms
  ↓
Molecules
  ↓
Atoms (최하위)

디렉토리 구조

src/
├── components/
│   ├── atoms/      # 가장 작은 단위 (Button, Input, Label 등)
│   ├── molecules/  # atoms의 조합 (SearchBar, FormField 등)
│   ├── organisms/  # molecules/atoms의 복잡한 조합 (Header, Footer 등)
│   ├── templates/  # 페이지 레이아웃
│   └── pages/      # 실제 페이지 컴포넌트

레이어별 패턴 가이드

빠른 가이드

컴포넌트 분류 방법

1. 더 이상 분해할 수 없는가? → Atoms
2. 2-3개 컴포넌트로 하나의 기능을 하는가? → Molecules
3. 여러 molecules/atoms로 복잡한 섹션을 구성하는가? → Organisms
4. 페이지의 레이아웃 구조인가? → Templates
5. 실제 데이터가 주입되는 라우트인가? → Pages

체크리스트

새 컴포넌트 작성 시:

• 올바른 레이어에 배치되었는가?
• 해당 레이어의 패턴 가이드를 준수하는가?
• 금지된 패턴을 사용하지 않았는가?
• 단일 책임 원칙을 지키는가?
• TypeScript 타입이 명확히 정의되었는가?

사용 방법

컴포넌트 검증

# 특정 컴포넌트 검증
claude code review src/components/molecules/SearchBar

# 디렉토리 전체 검증
claude code review src/components/organisms

자동 생성

# 새 컴포넌트 생성
claude code create atom Button
claude code create molecule SearchBar

더 알아보기

• 상세 가이드라인: reference.md 참조
• 코드 예시: examples.md 참조