React 폴더구조!

프론트엔드 개발자로서 React를 기반으로 일한지 어언 2년이 다되가는데, 폴더 구조는 나에게는 숙제 같았다.
2년이라는 경력에도 스스로의 기준이 제대로 갖춰지지 않았다 보니 더 그렇게 느껴졌던 것 같다.

📌숙제 완료?

엄밀히 따지면, 이건 개발자로 일 하면서 쭉 숙제로 남아있을 것 같다. 그래도 어느정도의 틀은 잡은 것 같다.
그래서 이번 블로그 글은 내가 생각하는 폴더구조에 대해 써보려고 한다.

📌 좋은 폴더 구조란?

너무 당연한 얘기지만 본인에게 가장 잘 맞는 폴더구조가 최고다.
폴더 구조는 프레임워크처럼 정해진 규칙이 있는 것이 아니므로, 누가 만드느냐에 따라 생각과 취향이 반영될 수밖에 없다. 그렇기 때문에, "이게 정답이다!"라고 할 수는 없지만, 적어도 나에게 맞는 구조는 무엇인지 고민하는 과정은 의미가 있다고 본다.

그렇다면 내 취향에 맞는 폴더 구조는 어떤 형태일까?

📌 응집도가 좋은 폴더구조

React를 처음 접했을 때는 pages, components, hooks 등의 역할별로 1차적으로 나누고, 그 안에서 기능별로 나누는 방식을 사용했다. 하지만 이 방식에서는 관련된 파일들을 찾기 위해 여러 폴더를 오가야 한다는 점이 단점으로 다가왔다.

즉, 응집도가 낮다고 느껴졌다. 응집도가 낮으면 해당 기능의 관련된 것들을 수정할 때 여러 폴더를 수정해야 하기 때문에 나에게는 맞지 않았다.

기존 폴더 구조 (역할 중심) 예시

📦 src
├── 📂 pages
│   ├── 📂 home
│   ├── 📂 booking
│   ├── 📂 profile
├── 📂 components
│   ├── 📂 common
│   ├── 📂 home
│   ├── 📂 booking
│   ├── 📂 profile
├── 📂 hooks
│   ├── 📂 common
│   ├── 📂 home
│   ├── 📂 booking
│   ├── 📂 profile
├── 📂 services
│   ├── 📂 common
│   ├── 📂 home
│   ├── 📂 booking
│   ├── 📂 profile
├── 📂 types
│   ├── 📂 common
│   ├── 📂 home
│   ├── 📂 booking
│   ├── 📂 profile
├── 📂 utils
│   ├── 📂 common
│   ├── 📂 home
│   ├── 📂 booking
│   ├── 📂 profile
└── 📂 styles
    ├── 📂 common
    ├── 📂 home
    ├── 📂 booking
    └── 📂 profile

이렇게 역할별로 나눈 폴더 구조에서는 한 기능과 관련된 코드가 여러 폴더에 흩어지게 되어 유지보수가 어려웠다. 예를 들어, booking 페이지의 기능을 수정하려면 pages/booking, components/booking, hooks/booking, services/booking 등을 찾아다녀야 했기 때문이다. 그리고 프로젝트가 커질수록 더 찾아다니기 어렵게 느껴졌다.

그래서 내가 생각한 방향성은 page단위로 응집도를 높이는 것이었다. 주로 Nextjs로 개발을 하다보니 page단위로 수정이 되는 것들이 많았고, page폴더 안에 모든게 있으면 편할 것 같다는 생각이 들었기 때문이다.
그리고 재사용성을 위해 재사용이 필요한 기능들은 features 폴더에서 분리하여 관리하는 것을 생각했다.

내 취향의 폴더 구조 (page 기반으로 응집도 높임) 예시

📦 src
├── 📂 pages
│   ├── 📂 home
│   │   ├── 📂 components
│   │   ├── 📂 hooks
│   │   ├── 📂 services
│   │   └── index.tsx
│   ├── 📂 booking
│   │   ├── 📂 components
│   │   ├── 📂 hooks
│   │   ├── 📂 services
│   │   └── index.tsx
│   ├── 📂 profile
│   │   ├── 📂 components
│   │   ├── 📂 hooks
│   │   ├── 📂 services
│   │   └── index.tsx
├── 📂 features
│   ├── 📂 chat
│   │   ├── 📂 components
│   │   ├── 📂 hooks
│   │   └── 📂 services
│   └── 📂 payment
│       ├── 📂 components
│       ├── 📂 hooks
│       └── 📂 services
└── 📂 shared
    ├── 📂 components
    ├── 📂 hooks
    ├── 📂 services
    ├── 📂 types
    ├── 📂 utils
    └── 📂 styles

이렇게 변경한 하면, 페이지별로 관련된 코드가 한 폴더에 보이기 때문에 찾기가 쉽다. 예를 들어 booking page를 수정해야 한다면 booking page 폴더만 찾으면 된다.

또한, 재사용이 필요한 기능들은 features 폴더에서 관리하고, 전역적으로 사용되는 것들은 shared에서 관리 함으로서 명확한 분리가 되지 않나 싶다.

참고 : 최기환님 블로그

📌 결론

폴더 구조는 개발자마다 선호하는 방식이 다를 수밖에 없고, 결국 본인이 유지보수하기 편한 방식이 가장 좋은 구조라고 생각한다.

React 공식 문서에서 "폴더 구조에 대해 5분 이상 고민하지 말라"는 이야기를 본 적이 있는데, 내가 짠 코드가 기능이나 역할에 충실하게 짜여 있다면 폴더를 나누는 것은 크게 시간이 걸리지 않기 때문이지 않을까 생각한다.