React 프로젝트 구조 잡기

 

 

 

작성 이유

1. 구조를 하나도 생각하지 않고 만든 프로젝트 리팩토링하면서 너무 고통받아서
2. 팀 프로젝트를 진행할 때 체계적인 구조를 잡고 진행하는 것이 좋을 것 같아서

 

0. React 공식문서

React는 파일을 어떤 식으로 폴더에 분류할 것인지에 대해서 제시하고 있지는 않습니다. 그러나 React 생태계 내에서 고려할만한 몇 가지 인기 있는 일반적인 접근법들이 있습니다.

 

 

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

 

일반적인 방법 중 하나.
CSS, JS, 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법

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

 

 

✍ 파일 유형에 의한 분류

 

비슷한 파일끼리 묶어주기

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

 

 

✍ 내 방법

현재 리팩토링중인 pilzAgendq를 기준으로 예를 들면,
component 폴더 안에 컴포넌트 관련된 내용.

이를 또 두개로 쪼개서 ui(button이나 form), 일반적 컴포넌트로 나누고

service 폴더 안에서 firebase와 소통하거나 유저 정보를 불러오는 로직을 각각 처리한다

 

routes 폴더 안에서는 경로에 따른 큰 박스들을 넣어둔다