리액트 네이티브 - 프론트엔드 UI 구조화 디자인패턴

아토믹 디자인 패턴 (Atomic Design Pattern)

UI를 작은 단위에서 큰 단위로 계층적으로 구성

 

- 계층

Atoms (버튼, 텍스트, 아이콘 등 가장 작은 단위)

Molecules (여러 Atoms가 모여 만든 작은 컴포넌트)

Organisms (Molecules들이 모여 만든 복잡한 컴포넌트)

Templates (페이지의 구조만 정의)

Pages (실제 데이터가 들어간 완성된 화면)

 

- 장점

재사용성, 명확한 책임 분리

 

- 단점

익숙하지 않으면 오히려 복잡하게 느껴질 수 있음

 

- 폴더 구조 예시

src/
  ├─ components/
  │   ├─ atoms/
  │   ├─ molecules/
  │   ├─ organisms/
  │   ├─ templates/
  │   └─ pages/

 

 

 

 

 

컨테이너 프레젠터 패턴 (Container-Presenter Pattern)

UI 렌더링과 로직을 분리

Container (데이터 fetching, 상태 관리, 이벤트 처리 (비즈니스 로직))

Presenter (실제 화면을 렌더링 (View 전달))

 

- 장점

테스트, 재사용 용이. UI와 로직 분리

 

- 단점

파일 수 증가

 

- 폴더 구조 예시

components/
  ├─ TodoItem/
  │   ├─ TodoItem.container.tsx
  │   └─ TodoItem.presenter.tsx

 

 

 

 

 

Hooks 분리 패턴

커스텀 훅으로 복잡한 상태 로직을 컴포넌트에서 분리

 

 - 장점

로직 재사용, 테스트 용이

 

- 단점

훅이 많아지면 추적이 어려움

 

- 폴더 구조 예시

src/
  ├─ hooks/
  │   ├─ useAuth.ts
  │   ├─ useForm.ts
  │   └─ useFetch.ts

 

 

 

 

 

기능 기반 구조 (Feature-Based Structure)

기능 단위로 폴더 분리 (페이지 또는 도메인 단위)

 

- 장점

팀 단위 작업 적합. 기능별 분리

 

- 단점

공통 컴포넌트 중복 정의될 수 있음

 

- 폴더 구조 예시

src/
  ├─ features/
  │   ├─ auth/
  │   │   ├─ components/
  │   │   ├─ hooks/
  │   │   ├─ authSlice.ts
  │   │   └─ index.tsx
  │   ├─ todo/
  │   │   └─ ...

 

 

 

 

도메인 주도 패턴 (Domain-Driven Pattern)

도메인 단위로 UI/로직을 모듈화

 

- 장점

확장성과 유지보수성 극대화

 

- 단점

초기 설계 부담

 

- 폴더 구조 예시

src/
  ├─ domains/
  │   ├─ user/
  │   │   ├─ components/
  │   │   ├─ services/
  │   │   ├─ hooks/
  │   │   └─ types.ts
  └─ shared/
      └─ common hooks, styles 등

 

 

 

 

 

React-Native 프로젝트 구조 예시

src/
├── api/               # axios, fetch 정의
├── assets/            # 이미지, 폰트 등
├── components/        # 공통 컴포넌트
│   ├── atoms/
│   ├── molecules/
│   └── organisms/
├── constants/         # 색상, 라우트, enum 등
├── features/          # 도메인 단위 UI & 로직
│   └── auth/
│       ├── components/
│       ├── hooks/
│       └── screens/
├── hooks/             # 공통 hooks
├── navigation/        # React Navigation 설정
├── provider/          # Redux, Query Client 등
├── selectors/         # Redux selector 등
├── style/             # 전역 테마, 스타일
├── utils/             # 공통 함수
└── App.tsx            # 진입점