본문 바로가기

React/Start

[React] 폴더 구성하기 + 파일 예시

폴더 구성에는 프로젝트 또는 회사마다 폴더 구조를 다르게 설정하므로 정답은 없습니다.

참고하셔서 프로젝트 스타일에 맞게 구성하시길 바랍니다.


📁 project\

  js App.js (실제 보여질 컴포넌트, 라우팅 구성)

  js Index.js (Root DOM Node에 App 컴포넌트를 렌더링)

 

 ⬇️ src\

⬇️ app\ 
    js store.js (Redux Store 생성)
⬇️ auth\ (인증 관련 폴더)
    js register.js (회원가입 처리)
    js RequireAuth.js (기능 처리 후 페이지 유지)
⬇️ assets\ (이미지 폴더)
  ⬇️ images\
    🖼️ logo.png
    🖼️ main.jpg
  ⬇️ icons\
    🖼️ search.svg
    🖼️ error.svg
⬇️ features\ 
  ⬇️ counter\ (Redux State와 Actions 사용)
     js Count.js
     js countSlice.js
⬇️ components\ (재사용 가능한 컴포넌트)
  ⬇️ common\ (공통적으로 사용되는 컴포넌트)
     js Button.js
     js Modal.js
     js Loading.js
  ⬇️ layout (레이아웃 구성 컴포넌트)
     js Header.js
     js Footer.js
     js Navbar.js
⬇️ pages\ (렌더링될 페이지 컴포넌트)
    js Main.js
    js About.js
    js Login.js
⬇️ styles\ (스타일 관련 폴더)
  ⬇️ css\ 
     # index.css
⬇️ utils\ (데이터 가공 처리, 날짜 포맷 등 유틸리티 함수들을 모아 놓은 폴더)
    js formatDate.js
    js calculate.js