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

이런 식으로 비슷한 파일끼리 묶어서 사용하는 것이다.

 

사실 이런 것들은 중요하지 않다. 단지 자신이 프로젝트를 설계하면서 좀 더 가독성있는 구조를 만드는것이 좋다. 저위에 있는 방법들이 정답은 아닐수있다. 자신이 보기편하게 파일구조를 제작하는 것이 제일 베스트가 아닐까 생각한다. 결론 파일구조는 자신이 편한데로 아니면 회사의 가이드라인에따라 구성하면된다. 끝!