React 폴더구조

src 내부 폴더구조

─ src
 ├─ components
 ├─ assets 
 ├─ hooks (= hoc)
 ├─ pages
 ├─ constants
 ├─ config
 ├─ styles
 ├─ services (= api)
 ├─ utils
 ├─ contexts
 ├─ App.js
 └─ index.js

 

• components 

재사용이 가능한 컴포넌트들이 위치하는 폴더 이다.
예로들어 header와 같이 홈페이지 상단에 위치하는 파일같은 경우 재사용 하기쉬운 컴포넌트들의 코드를 작성 한다.

 

• assets

이미지 혹은 폰트와 같은 파일들이 저장되는 폴더이다.
이미지와 같은 파일들을 public 에 직접 넣는 경우도 있는데 둘의 차이는 컴파일시에 필요한지 여부이다.
index.html 내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일은 public에 반면, 컴포넌트 내부에서 사용하는 이미지 파일인 경우 assets 폴더에 위치 시켜야 한다.

• hooks 

커스텀 훅이 위치하는 폴더이다. ex) useEffect , usestate 

• pages

react route 등을 이용하여 라우팅을 적용할 때 페이지 컴포넌트를 이 폴더에 위치 시킨다.
즉, 페이지 이동할때 각 페이지를 만들어 작성하게 된다.

• constants

공통적으로 사용되는 상수들을 적의한 파일들이 위치한 폴더이다.

• config

config 파일이 많지 않은 경우 보통 최상위에 위치시켜놓지만 여러개의 config 파일이 있을 경우 폴더로 분리 하기도 한다.

• styles 

기본 파일로 App.css 가 파일이 있으나 각 페이지의 css 를 만들어 작성하면 된다.

• services(=api)

보통 api 관련 로직의 모듈 파일이 위치하며 auth 와 같이 인증에 관련된 파일이 포함되기도 한다.

• utils

정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일들이 위치하는 폴더이다.

• stores

redux-toolkit을 사용할때 관련된 파일들이 위치하는 곳으로 상태관리를 위한 폴더 이다.