React 활용 - 7 : 폴더 구조 잡기

어떤 프로젝트를 하던 폴더구조를 잡는 것은 필수이고, 기본적인 사항이다.

 

이번에는 React에서 기본적인 폴더구조를 잡는 방법에 대해 간략하게 정리해 보겠다.

my-react-app/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── assets/
  │   │   ├── images/
  │   │   └── css/
  │   ├── components/
  │   │   ├── App/
  │   │   │   ├── App.js
  │   │   │   └── App.css
  │   │   ├── Header/
  │   │   │   ├── Header.js
  │   │   │   └── Header.css
  │   │   └── ...
  │   ├── pages/
  │   │   ├── HomePage/
  │   │   │   ├── HomePage.js
  │   │   │   └── HomePage.css
  │   │   ├── AboutPage/
  │   │   │   ├── AboutPage.js
  │   │   │   └── AboutPage.css
  │   │   └── ...
  │   ├── utils/
  │   ├── services/
  │   ├── store/
  │   ├── index.js
  │   └── index.css
  ├── .gitignore
  ├── package.json
  └── README.md

 

 

1) public/: 정적 파일들이 위치한 폴더로 index.html, 파비콘 등이 들어간다.

2) src/assets/: 이미지, 글꼴, 스타일시트 등과 같은 자산이 저장되는 폴더.

3) src/components/: 재사용 가능한 UI 컴포넌트를 저장하는 폴더로, 각 컴포넌트는 자신만의 폴더를 가지고, 그 안에 해당 컴포넌트의 JavaScript 파일과 CSS 파일이 들어간다.

4) src/pages/:각 페이지 별로 컴포넌트를 저장하는 폴더로,  이 폴더 내에 각 페이지별로 폴더를 만들고, 해당 페이지의 JavaScript 파일과 CSS 파일을 저장한다.

5) src/utils/: 공통으로 사용되는 유틸리티 함수를 저장하는 폴더

6) src/services/: API 호출이나 외부 서비스와 관련된 코드를 저장하는 폴더.

7) src/store/: 리덕스, MobX 등의 상태 관리 라이브러리와 관련된 코드를 저장하는 폴더.

 

이러한 폴더 구조는 프로젝트의 복잡성이나 요구사항에 맞게 변경하여 사용한다.

 

 

 

****APP.js 관련은 src 아래로 따로 뺐다. (main 페이지 역할) ****

my-react-app/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── assets/
  │   │   ├── images/
  │   │   └── css/
  │   ├── components/
  │   │   ├── Header/
  │   │   │   ├── Header.js
  │   │   │   └── Header.css
  │   │   └── ...
  │   ├── pages/
  │   │   ├── HomePage/
  │   │   │   ├── HomePage.js
  │   │   │   └── HomePage.css
  │   │   ├── AboutPage/
  │   │   │   ├── AboutPage.js
  │   │   │   └── AboutPage.css
  │   │   └── ...
  │   ├── utils/
  │   ├── services/
  │   ├── store/
  │   ├── index.js
  │   └── index.css
  |   └── App.js
  |   └── App.css
  ├── .gitignore
  ├── package.json
  └── README.md