[React 폴더 구조] 일반적인 React 프로젝트의 디렉토리 구조를 설정해보자

 

일반적인 프로젝트 디렉토리구조

본 디렉토리 구조는 자바스크립트를 사용한 React를 이용한 APP을 기준으로 한 디렉토리 구조이고, 상태관리로 Recoil을 사용한 프로젝트의 디렉토리 구조이다.

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    index.css
    favicon.ico
  src/
    assets/
      images/
        logo.png
        background.jpg
      fonts/
        font.ttf
    components/
      global/
        Button/
          Button.js
        Input/
          Input.js
        Shared/
          MySharedComponent.js
      FeatureA/
        MyComponentA.js
      FeatureB/
        MyComponentB.js
    constants/
      routes.js
      colors.js
    containers/
      App/
        App.js
      Home/
        Home.js
    hooks/
      useMyHook.js
      useAnotherHook.js
    recoil/
      atoms/
        myAtom.js
        anotherAtom.js
      selectors/
        mySelector.js
        anotherSelector.js
    utils/
      api.js
      helper.js
    index.js
    serviceWorker.js

src 에 실질적으로 우리가 작성한 코드가 들어가게 되는 데 그 구조를 보면 다음과 같다.

Assets

assets/
  images/
    logo.png
    background.jpg
  fonts/
    font.ttf

asset 폴더에는 사용해야할 이미지, 아이콘, 폰트 등 일반적으로 웹앱의 스타일링에 사용될 파일들을 저장하는 곳이다.

 

Components

components/
  global/
    Button/
      Button.js
    Input/
      Input.js
    Shared/
      MySharedComponent.js
  FeatureA/
    MyComponentA.js
  FeatureB/
    MyComponentB.js

컴포넌트 폴더는 전역적으로 사용할 Global 컴포넌트와, 특정 기능을 담당하는 컴포넌트로 디렉토리 구조를 나눴다.

 

Pages

페이지는 말 그대로 페이지에 해당하는 컴포넌트를 모아놓는 곳으로, View를 담당하는 폴더라고 생각하면 된다. 이때 

 

Constants

constant 폴더는 프로젝트에 사용되는 상수를 보관하는 곳이다. 이렇게 상수를 따로 관리하는 이유는 추후에 바뀔 수 있는 상수들을 한번에 관리하기 위함 즉 유지보수를 위해 하는것이다.

개인적으로 이 폴더에 브랜드 메시지, api 엔드포인트 등을 보관한다.

 

hooks

Hooks 는 커스텀 리액트 훅을 보관하기 위해 사용하는 폴더이다.

utils

Utils 폴더는 훅스는 아니지만 프로젝트 전반에서 사용 될 수 있는 유용한 함수들을 모아놓은 곳이다.

Ex) 숫자를 받아서 적절하게 포매팅 해주는 함수, 데이터를 파싱해주는 함수 등등

 

recoil

  atoms/
    myAtom.js
    anotherAtom.js
  selectors/
    mySelector.js
    anotherSelector.js

전역상태를 관리하기 위해 사용하는 폴더이고,  상태 그 자체인 Atom과 Atom의 파생상태인 Selector 을 따로 분리해서 관리한다.