[React] 프로젝트 폴더(디렉토리) 구조

React 개발 영역에서 프로젝트의 파일과 디렉토리를 조직하는 방식은 생산성과 애플리케이션의 유지보수성에 상당한 영향을 미칠 수 있음

프로젝트가 확장됨에 따라 잘 고안된 디렉토리 구조는 애플리케이션 아키텍처의 기반이 됨

 

기본 이해

특정 디렉토리 구조에 대해 뛰어들기 전에, React 프로젝트의 핵심 구성 요소를 파악하는 것이 필수적임

React 애플리케이션은 핵심적으로 서로 상호작용하는 컴포넌트로 구성되어 사용자 인터페이스를 형성함

컴포넌트 외에도 애플리케이션은 상태 관리, 라우팅, 유틸리티 함수, 스타일링을 포함할 수 있음

이러한 요소를 인식하는 것은 프로젝트의 요구에 맞는 조직 전략을 고안하는 첫 단계임

 

단순한 vs. 복잡한 프로젝트 구조

프로젝트의 폴더 구조의 복잡성은 애플리케이션 자체의 복잡성을 반영해야 함

작은 프로젝트의 경우, 빠른 개발과 단순성에 중점을 둔 평면적이고 간단한 구조가 충분할 수 있음

그러나 프로젝트가 크기와 복잡성에서 성장함에 따라 확장성과 유지보수성을 보장하기 위해 더 계층적이고 기능 기반 구조가 필요할 수 있음

 

단순한 구조 예시

/src
  /components
    Header.js
    Footer.js
  App.js
  index.js

 

복잡한 구조 예시

/src
  /components
    /common
      Button.js
      Modal.js
  /features
    /TodoList
      /components
        TodoItem.js
      index.js
    /UserProfile
      /components
        ProfilePic.js
      index.js
  /utils
    api.js
  App.js
  index.js

 

기능 기반 디렉토리 구조

React 프로젝트를 조직하는 한 가지 효과적인 접근 방식은 애플리케이션의 각 기능을 포함하는 자체 디렉토리를 포함하여 모든 관련 컴포넌트, 상태 관리, 테스트를 포함하는 기능 기반 구조임

이 접근 방식은 모듈성을 촉진하고 애플리케이션을 확장하고 유지보수하기 쉽게 만듬

/src
  /features
    /FeatureName
      /components
      /hooks
      FeatureName.js
      FeatureName.test.js

 

atomic design 구조

Brad Frost의 Atomic design 방법론에서 영감을 받은 이 접근 방식은 컴포넌트를 원자${atoms}$, 분자${molecules}$, 유기체${organisms}$, 템플릿${templates}$, 페이지$_{pages}$로 조직함

다양한 UI 요소를 포함하는 대규모 애플리케이션에 특히 유용하며, 애플리케이션 전반에 걸쳐 재사용성과 일관성을 장려함

/src
  /components
    /atoms
      Button.js
    /molecules
      SearchBar.js
    /organisms
      Header.js
    /templates
      PageTemplate.js
    /pages
      HomePage.js

 

확장성과 모범 사례

선택된 구조에 관계없이 프로젝트의 확장성을 유지하는 데 도움이 되는 몇 가지 모범 사례가 있음

• import를 단순화하기 위해 인덱스 파일 사용
• 스타일을 해당 컴포넌트와 가까운 곳에 유지하기, CSS 파일을 동일한 디렉토리에 두거나 CSS-in-JS 사용
• 재사용을 촉진하기 위해 유틸리티 함수와 훅을 공유 디렉토리에 조직

 

references

File Structure – React

File Structure – React

React 8 — best practices + Folder Structure

React 8 — best practices + Folder Structure

How To Structure React Projects From Beginner To Advanced

How To Structure React Projects From Beginner To Advanced