[리액트] 폴더와 파일 구조 예제

프로젝트를 처음 시작 할때 막 시작하면 나중에 유지보수가 쉽지 않다.

그래서 처음부터 구조를 잡고 가는 것이 중요하다.

이번에 새로운 프로젝트를 리액트로 만들게 되면서 아래같이 구조를 잡고 진행을 하였다.

src/
├── assets/             # 이미지, 폰트 등 정적 파일
│   ├── images/
│   └── fonts/
├── components/         # 재사용 가능한 컴포넌트
│   ├── common/         # 공통 컴포넌트 (버튼, 인풋 등)
│   └── layout/         # 레이아웃 컴포넌트 (헤더, 푸터 등)
├── contexts/           # Context API 관련 파일
├── hooks/              # 커스텀 훅
├── pages/              # 페이지 컴포넌트
│   ├── Home.js
│   ├── About.js
│   └── NotFound.js
├── routes/             # 라우트 설정 파일
│   └── Routes.js
├── services/           # API 호출 등 서비스 로직
│   └── api.js
├── store/              # Redux 등 상태 관리
│   ├── actions/
│   ├── reducers/
│   └── store.js
├── styles/             # 스타일 파일 (CSS, SCSS 등)
│   ├── globals.css
│   └── components/
├── utils/              # 유틸리티 함수
│   └── helpers.js
├── App.js              # 루트 컴포넌트
├── index.js            # 진입점 파일
└── setupTests.js       # 테스트 설정 파일

각 폴더와 파일에 대한 설명은 아래와 같다.

1. assets: 이미지, 폰트 등 정적 파일을 저장하는 폴더.
2. components: 재사용 가능한 컴포넌트를 모아둔 폴더.
   • common: 버튼, 인풋 등 공통 컴포넌트를 저장.
   • layout: 헤더, 푸터 등 레이아웃 관련 컴포넌트를 저장.
3. contexts: Context API를 사용하는 파일들을 저장.
4. hooks: 커스텀 훅을 저장.
5. pages: 페이지 컴포넌트를 저장. 각각의 페이지에 해당하는 컴포넌트를 파일로 분리.
6. routes: 라우트 설정 파일을 저장.
7. services: API 호출 등 비즈니스 로직을 처리하는 파일을 저장.
8. store: 상태 관리를 위한 파일들을 저장. 예: Redux의 액션, 리듀서, 스토어 설정.
   • actions: 액션 생성자 파일을 저장.
   • reducers: 리듀서 파일을 저장.
9. styles: 스타일 파일을 저장. CSS 또는 SCSS 파일을 구성 요소별로 분리해서 저장.
   • globals.css: 글로벌 스타일을 저장.
   • components: 각 컴포넌트별 스타일을 저장.
10. utils: 유틸리티 함수들을 저장.
11. App.js: 루트 컴포넌트.
12. index.js: 애플리케이션의 진입점 파일.
13. setupTests.js: 테스트 설정 파일 (예: Jest 설정).

이 구조를 사용하면 프로젝트를 체계적으로 관리할 수 있고

파일과 폴더가 많아져도 쉽게 찾고 수정할 수 있을 것이다.