React의 폴더구조

바냐·2023년 6월 23일

리액트의 공식문서에는 일반적인 접근법이 있을 뿐 딱히 정해진 폴더구조와 컴포넌트 구조는 없다.
일반적으로 CRA로 초기 세팅 시 다음과 같은 파일구조가 만들어진다.

my-app
├── node_modules
├── public
├── src
├── .gitignore
├── package.json
└── README.md

파일들의 정보를 간략히 알아보자

node_modules

CRA구성하는 모든 패키지 소스코드가 존재하는 폴더

public

index.html같은 정적파일이 포함되는 곳으로 컴파일이 필요없는 파일들이 위치하는 폴더

src

리액트 내부에서 작성하는 거의 모든 파일들이 포함되는 곳,
컴파일이 필요없는 파일들이 위치하는 폴더

.gitignore

깃에 포함하고 싶지 않은 파일의 이름 또는 폴더등을 입력하는 파일

package.json

CRA 기본 패키지 외 추가설치 된 라이브러리 패키지 정보(종류, 버전)가 기록되는 파일

모든 프로젝트마다 package.json이 하나씩 존재함

라이브러리가 설치된 node_modules대신 packge.json에 적혀있는 라이브러리 목록을 기준으로 npm에서 설치하게 된다.

README.md

보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는 곳으로 해당 저장소에 진입하면 가장 먼저 띄워진다

리액트 공식문서에서 제시하는 폴더구조의 일반적인 접근법은 다음과 같다.

1. 파일의 기능이나 라우트에 의한 분류

프로젝트 구조에 대한 일반적인 방법 중 하나는 CSS, JS, test 파일들 기능이나 라우트로 분류된 폴더에 같이 두는 방법이다.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

2. 파일 유형에 의한 분류

프로젝트 구조를 정하는 또다른 인기방법은 비슷한 파일끼리 묶는 것이다.

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

공식홈페이지에서는 2가지 조언을한다

1. 너무 많은 중첩은 피하라

프로젝트에서 디렉토리 중첩과 관련된 문제점을이 있다.
프로젝트 간에 상대 경로를 통한 임포트 작성하거나 파일이 옮겨졌을 때 그런 임포트들을 업데이트 하는 것이 더 어려워 진다.
단일프로젝트라면 3,4번을 최대한으로 폴더를 중첩하도록 제한하는 것을 고려해라

2. 너무 깊게 생각하지 마라

프로젝트를 시작하는 단계라면 파일구조를 선택하는데 있어 5분이상 투자하지 않는다.
완전히 난관에 봉착했다면 일단 모든파일을 한 폴더에 보관하는 방법으로 시작하라,
결국 프로젝트가 커져서 일부 파일을 나머지로부터 분리하길 원하게 될 것이다.
일반적으로 자주 같이 변경되는 파일들을 같이 보관하는 것이 좋은 방법이며 이런 원칙을 "코로케이션(colocation)"이라고 부른다.

프로젝트가 커질수록 실제로 앞서 언급한 방법들을 섞어서 사용하게된다.
그러므로 처음부터 "옳은"방법 하나를 선택하는것은 대단히 중요한 포인트는 아니다.

SRC 내부 폴더구조

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

components

재사용 가능한 컴포넌트들이 위치하는 폴더
컴포넌트는 많아질 수 있기에 components내부에서 하위폴더로 분류하는 경우가 많음

assets

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