React 폴더 구조

처음 혼자 개발을 시작했을 때는, 사실 혼자 개발했기 때문에 폴더 구조에 크게 신경 쓰지 않았습니다.

하지만 프로젝트가 커지고 파일들이 늘어나면서 어떻게 관리해야 할지 고민이 되었죠.

검색을 통해 다양한 폴더 구조 방식을 찾아봤고, 다른 프론트엔드 개발자들과 협업하면서 각자 다른 폴더 구조를 사용한다는 것도 알게 되었습니다.

전체적으로는 비슷한 구조를 따르고 있었지만, 각자의 경험에 따라 편리하게 사용하는 방법이 조금씩 달랐습니다.

그래서 저에게 가장 맞고 편리했던 폴더 구조를 기록해 두려고 합니다.

---

├── public/
│   ├── index.html
│── src/
│   ├── assets/
│   │   ├── images
│   │   └── fonts
│   ├── components/
│   │	└── Button/
│   │		├── Button.tsx
│   │		├── events.ts
│   │		├── styles.ts
│   │		└── types.ts
│   ├── pages/
│   │   └── Root/
│   │	 	├── Root.tsx
│   │	 	├── events.ts
│   │	 	└── types.ts				
│   ├── routes/
│   │   └── Router.tsx
│   ├── services/
│   ├── utils/
│   │	└── index.ts
│   ├── styles/
│   ├── store/
│   ├── app.tsx
│   └── index.ts
├── .gitignore
├── README.MD
├── package.json
├── package-lock.json
├── tsconfig.json
├── .eslintrc.json
└── .prettierrc

1. public/ : 정적 파일들이 위치한 폴더로 index.html, 파비콘 등이 포함
   • index.html : 웹 브라우저에 직접 로드되며, 이름을 변경하면 오류 발생
2. src/assets/ : 이미지, 글꼴 등과 같은 자산이 저장되는 폴더
3. src/components/ : 재사용 가능한 컴포넌트를 저장하는 폴더로, 각 컴포넌트의 폴더를 생성해 그 안에 이벤트 파일, 스타일 파일, 타입 파일 등을 저장
4. src/pages/ : 각 페이지를 저장하는 폴더로, 각 페이지의 폴더를 생성해 그 안에 이벤트 파일, 타입 파일 등을 저장
5. src/routes/ : 라우팅 관련 파일을 저장하는 폴더
6. src/services/ : API 호출과 관련된 코드를 저장하는 폴더
7. src/utils/ : 공통으로 사용되는 유틸 함수를 저장하는 폴더 ( 자바스크립트 모듈 )
8. src/styles/ : 전역으로 사용되는 CSS 관련 파일을 저장하는 폴더
9. src/store/ : 리덕스와 같은 전역 상태 관리 라이브러리와 관련된 코드를 저장하는 폴더
10. index.ts, App.tsx : CRA로 프로젝트를 생성했을 때 자동으로 src 폴더에 포함되어 있는 파일들
    • App.tsx : 컴포넌트를 불러와 조합해 화면에 렌더링하는 역할을 담당
    • index.ts : index.html 파일에 의해 호출되어 애플리케이션을 동적으로 렌더링, React 애플리케이션의 진입점으로 초기화와 렌더링을 담당하는 부분 ( Router, GlobalStyled, react-query와 같은 전역적인 요소는 이곳에서 관리 )

컴파일 단계에서 필요한 이미지 파일(ex. 파비콘)은 public  폴더에 저장하고
컴포넌트 내부에서 사용하는 이미지 파일은 src 폴더에 위치시켜야 합니다.

components 폴더에는 공통으로 사용되는 컴포넌트만 저장하고
한 페이지에서만 사용되는 컴포넌트는 각 페이지 폴더 내부에 저장합니다!
page단에서는 되도록 스타일 파일을 생성하지 않도록 합니다.

store 폴더는 redux가 아니라 contextAPI를 사용하는 경우 contexts로 변경해서 사용하기도 합니다.

이 과정에서 제가 느꼈던 것은 프로젝트가 진행될수록 폴더 구조를 변경하는 것은 매우 번거롭기 때문에, 가능한 개발을 시작하기 전에 폴더 구조를 설계하는 것이 좋다는 거에요. 특히 협업을 할 때는 서로 다른 방식을 추구할 수 있기 때문에 충분한 의사소통을 통해 함께 설계하는 것이 중요하다고 느꼈어요.

또, 폴더 구조에는 정답이 없다고 생각해요.

각자 자신에게 가장 편리하다고 느껴지는 구조가 가장 좋다고 생각합니다.

다만 주의할 점은 너무 깊은 폴더 구조는 좋지 않다는 것..!

---

App.jsx 파일을 index.js 에 렌더링하기보다는 Root.jsx, Admin.jsx 등 각 페이지들의 공통된 레이아웃을 만들어놓고

createBrowserRouter과 RouterProvider을 사용해서 렌더링 하는 방법도 있습니다.

저도 최근에 알게 되어 자주 사용하는 방법인데요, 이 부분은 다음에 추가로 작성해볼 예정입니다!