React 프로젝트 폴더구조 리팩토링

 개발 시작 전에 폴더구조에 대한 회의를 진행했어야 했지만, 내가 프로젝트의 중간에 합류하기도 했고, 기존에 계획되어있던 개발 일정이 있었기 때문에 충분한 논의를 거치지 못한 채 개발을 진행하였다. 그래서 폴더트리가 엉망이었고, 이를 리팩토링 하기로 하였다. 

 

📌  전체적인 구조

./src
├── app
├── assets
├── components
├── features
├── hooks
├── layout
├── pages
├── styles
├── types
└── utils

 

1. app 

├── app
│   └── api

프로젝트의 기능과 관련된 여러 파일을 배치하는 폴더입니다. 

api 하위폴더를 두어 api 호출과 관련된 파일을 위치시켰습니다. 

 

2. assets

이미지 파일들이 위치하는 폴더입니다. 이미지와 같은 파일을 public에 위치시키는 경우도 있는데, 컴파일 시에 필요한지의 여부에 따라 구분합니다. favicon과 같이 index.html 내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public에, 컴포넌트 내부에서 사용하는 경우에는 assets 폴더에 위치시킵니다. 

 

3. components

├── components
│   ├── Header.tsx
│   ├── Loading.tsx
│   ├── modal/
│   └── button/

프로젝트 전반적으로 재사용되는 컴포넌트가 위치하는 폴더입니다. 기본적으로는 루트경로에 위치하지만 연관된 컴포넌트들이 존재하는 경우 한 데 묶어 하위폴더로 추가 분류하였습니다. 

 

4. features

./src/features
├── auth
│   ├── authApiSlice.ts
│   └── userApiSlice.ts
└──bookmarks
    ├── services
    │   ├── bookmarkSlice.ts
    │   ├── bookmarkEventApiSlice.ts
    │   ├── bookmarkFolderApiSlice.ts
    │   └── bookmarkFolderSlice.ts
    └── modals
        ├── BookmarkFolderModal.tsx
        ├── BookmarkFolderStyle.tsx
        ├── BookmarkModal.tsx
        └── BookmarkModalStyle.tsx

프로젝트에 필요한 재사용 컴포넌트 및 queries를 기능별로 분류하여 정리한 폴더입니다. 기능별로 파일을 쉽게 찾을 수 있고, 파일의 용도를 파악하기에 좋습니다. 

src/components에 존재하는 재사용 컴포넌트는 컴포넌트 전반에서 재사용되는 경우라면, src/features 에 존재하는 재사용 컴포넌트는 특정 기능에 한해서만 재사용됩니다. 예를들어서 CommonModal.tsx는 모든 모달의 뼈대가 되는 컴포넌트라면, BookmarkModal.tsx는  북마크 기능만을 수행하는 모달입니다. 

상태관리툴로 Redux-toolkit과 RTK-Query를 사용했는데, 이에 관련된 api, query/mutation 들은 기능별로 분류하여  services 하위폴더에 위치시켰습니다. 

 

5. hooks

커스텀 훅이 위치하는 폴더입니다. 

 

6. layout

레이아웃 파일이 위치하는 폴더입니다. 

 

7. pages

./src/pages
├── MyPage
│   ├── MyLike
│   │   ├── MyLike.tsx
│   │   └── MyLikeStyle.tsx
│   ├── MyProfile
│   │   ├── EditMyProfile.tsx
│   │   └── EditMyProfileStyle.tsx
│   ├── MyReviews
│   │   ├── MyReviews.tsx
│   │   └── MyReviewsStyle.tsx
│   ├── index.tsx
│   └── style.tsx
└── Main
    ├── index.tsx
    └── style.tsx

react router 등을 이용하여 라우팅을 적용할 때 필요한 페이지 컴포넌트를 이 폴더에 위치시킵니다. 하위 컴포넌트들은 하위폴더를 만들어 연관된 것들끼리 묶어 정리하였습니다. 

 

8. styles

css 파일들이 위치하는 폴더입니다. 

 

9. types

type 파일이 위치하는 폴더입니다. 

 

10. utils

정규표현식이나 공통 함수, 공통 상수들이 위치하는 폴더입니다.