프로젝트를 시작하면서 가장 먼저 고민했던 것 중 하나가 폴더 구조였다.

Flutter로 프로젝트를 진행했던 것과는 여러 구조들이 다를 것이라고 생각해서 관련된 내용을 정리하고 시작하고자 한다.

---

📦 기본 폴더 구조

React에서 가장 기본적인 폴더 구조를 알아보자.

src/
├── components/     // 재사용 가능한 UI 컴포넌트
├── pages/          // 페이지 단위 컴포넌트
├── styles/         // 전역 스타일 관리
│   ├── colors/
│   │   └── colors.css
│   ├── fonts/
│   │   └── fonts.css
│   └── global/
│       ├── reset.css
│       └── common.css
├── api/            // API 요청 함수
├── hooks/          // custom hook
├── utils/          // 공통 함수
└── assets/         // 이미지, 아이콘
    └── images/

폴더별 역할 정리

components

재사용 가능한 UI 조각

• Button
• Card
• Header
• ItemCard

여러 페이지에서 사용할 수 있도록 만드는 것이 핵심

---

pages

화면 단위

• MainPage
• Detailpage
  등등

하나의 화면 = 하나의 페이지

---

styles

전역 스타일 관리

• colors.css
• fonts.css
• reset.css
• common.css

디자인과 관련된 파일들

---

api

서버 통신

* 예시
export async function getProducts() {
  const res = await fetch('/products');
  return res.json();
}

API 로직을 분류하여 관리하면 컴포넌트가 깔끔해진다

---

hooks

function useProducts() {
  // 데이터 fetch 로직
}

로직 재사용을 위한 공간

---

utils

공통 함수

---

assets

이미지, 아이콘

---

Flutter와 React 폴더 구조 차이

Flutter로 프로젝트를 진행할 때는 MVC, MVVM 같은 아키텍처 패턴 중심으로 폴더를 나누는 경우가 많았다.

하지만 React는 조금 다르게 접근한다는 것을 알았다.

⚛️**React는 '역할'보다 '기능(UI)'으로 나눈다

• 이 파일이 어디에 사용되는가

컴포넌트가 기본 단위인 React에서는 컴포넌트 하나 자체가 구조 역할을 하기에 이러한 특징이 생긴다.

또한 React는 공식적으로 정해진 폴더 구조가 없다고 한다.

그래서 작은 프로젝트는 단순 구조로 진행되지만, 커질 수록 feature 기반으로 확장되는 경우가 많다고 한다.

---

프로젝트를 시작하기 전에 폴더 구조와 같은 여러 컨벤션들을 미리 정리하고 약속해두고 시작하면서 진행 중에 생기는 크고 작은 이슈들을 미리 방지하기에 유리함을 느꼈다.