[ React / Architecture ] React 프로젝트 구조를 어떻게 짜야할까?

 

 

**  React 공식 페이지 파일 구조를 참고하여 공부 목적으로 정리한 포스팅입니다. **

 

---

 

1. 기능 또는 라우트 단위로 분류

 

일반적인 방법으로, 라우트(프로젝트의 경로) 폴더에 해당 라우트와 관련된 CSS, JS 등을 같이 두는 방법이 있다.

서비스의 주요 기능을 추리고, 그 기능들을 얼마나 세분화할지 고민 후 분류하는 방법도 있다. 

내가 주로 사용하는 방법도 이런 분류 방법인데, 서비스에서 가장 중요한 핵심 기능 or 서비스를 구분하여

그 안에 파일들을 분류하는 방법이 나에게는 가장 익숙한 방법인 것 같다.

 

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, components 등과 같이 유형별로 분류해주는 방법은 보면 알겠지만,

규모가 큰 프로젝트엔 적합하지 않다. 나의 경우는 components 폴더 안에서 다시 기능별로 구분을 하는 방법으로 분류했던 프로젝트가 있었다.

 

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

 

 

 

 

 

 

파일 구조를 짤 때 주의할 점 ❗️

 

- 너무 많은 중첩 피하기 : 깊은 디렉토리 중첩은 JS프로젝트에서 많은 문제점을 야기한다. 단일 프로젝트 내에서는 3~4번을 최대한으로 프로젝트 중첩을 제한하는 것을 권장.

 

- 너무 깊게 생각하지 않기 : 프로젝트 시작 단계라면 일단 코드를 작성해보고, 규모가 커진다면 자주 함께 변경되는 파일들을 같이 보관하는 것이 일반적으로 좋은 방법. (이런 원칙을 "코로케이션(colocation)" 이라고 부른다.)

 

 

 

---

 

 

여기까지가 React 공식 홈페이지에서 파일 구조에 대한 설명을 참고한 내용인데, 내 생각에 가장 중요한 핵심은

너무 깊게 생각하지 않고, 각자의 프로젝트에 맞게 가장 좋은 방법을 선택하면 될 것 같다.

나는 다른 동료들을 생각하여 최대한 직관적이면서도 작업하기 효율적으로, 또 쓸데없는 중첩은 최대한 피해서 구조를 짜려고 고민하다 보면 점점 더 좋아지지 않을까 생각한다. 

 

일단 아무 생각없이 짜는 것보다, 어떻게 하면 더 좋게 짤 수 있는지, 어떻게 하면 처음 프로젝트 구조를 보는 사람도 쉽게 찾아서 유지보수할 수 있는지, 이런 것들에 대한 고민을 한다는 것 자체가 나를 발전시켜주는 고민이라고 생각하기 때문에....! 지금은 완벽한 구조라고 볼 순 없겠지만 점점 노력하고 고민하다 보면 나중엔 프로젝트 기획을 보면 머릿속에서 구조가 딱딱 나오는 날이 오지 않을까? 생각한다! 😄

 

나는 보통 페이지의 수가 많으면 라우트 단위로 묶고,

많은 기능이 있는 프로젝트는 기능별로 묶어주는 식으로 프로젝트의 성격에 맞게 파일 구조를 짜려고 한다.

하지만 이렇게 하다가도 중간에 구조를 전체 변경하는 경우도 많다..ㅠㅠㅋㅋㅋ

 

그래서 이번에는 절대경로를 이용하여 import를 하고 있는데,

중간에 파일 구조 변경에 대한 부담이 적어서 진작 절대 경로를 이용할걸 싶었다!

절대경로 import 방법은 조만간 포스팅해야겠다-!