리액트 프로젝트 디렉토리 구조

더 좋은 방법도 많겠지만 나는 아래와 같이 사용하고 있다.

└── src
    ├── components
    ├── containers
    ├── lib
    │   ├── redux
    │   ├── rest
    │   └── utils
    └── pages

src/components

상태 관리가 이루어지지 않고 그저 props를 받아와서
화면에 UI로 나타나는 프레젠테이셔널 컴포넌트 생성

 

src/containers

리덕스와 연동되어 리덕스 스토어에서 상태값을 구독하고

디스패치 함수를 정의하는 컨테이너 컴포넌트 생성.

구독한 상태값과 디스패치 함수는 프레젠테이셔널 컴포넌트 에 props로 전달되어

각각 동적데이터를 데이터를 완성하거나 이벤트 함수에 연결된다.

 

src/lib/redux

기능별로 액션 타입, 액션 생성 함수, 리듀서, 사가 코드를 통합한 
Ducks 패턴으로 정의된 리덕스 모듈 생성.
디렉토리 내 index.js 파일에서 리듀서와 사가를 통합한다.

 

src/lib/rest

uri 별로 endpoint가 정의된 restApi 모듈을 정의한다.

 

src/lib/utils

Api 비동기처리, 커스텀 Hooks 등 여러 컴포넌트에서 사용되는 공통함수를 정의한다

 

src/pages

컴포넌트를 조합해서 화면에 페이지 단위로 보여지는 컴포넌트를 정의한다.