파일 구조

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

 

[ 너무 많은 중첩 피하기 ]

---

단일 프로젝트에서는 3번 혹은 4번의 중첩을 제한해보자.

 

[ 최대 5분 ]

---

파일 구조에 대해 고민할 시간을 최대 5분으로 하고
우선 작성을 해보자.

 

참고 : https://ko.reactjs.org/docs/faq-structure.html

파일 구조 – React