3월 08, 2026

React 실무에서 많이 쓰는 src 폴더 구조 TOP 3

요즘 React 실무에서 많이 쓰는 src 폴더 구조 TOP 3를 정리하면 다음 3가지입니다.
(스타트업 ~ 대기업까지 실제로 많이 보이는 패턴) 🚀
라우팅은 보통 React Router, 빌드는 Vite 조합이 많습니다.

1️⃣ 기본형 구조 (가장 많이 쓰는 표준)

중소 ~ 중형 프로젝트에서 가장 흔함

src/
 ├ api/
 ├ assets/
 ├ components/
 │   ├ ui/
 │   └ common/
 │
 ├ hooks/
 ├ layouts/
 │   └ MainLayout/
 │
 ├ pages/
 │   ├ Home/
 │   └ Login/
 │
 ├ routes/
 ├ store/
 ├ utils/
 ├ types/
 ├ App.tsx
 └ main.tsx

특징

components → 재사용 UI
pages → 화면 단위
layouts → 페이지 구조
api → 서버 통신

👍 장점

이해하기 쉬움
대부분 회사에서 바로 적응 가능

2️⃣ Feature 기반 구조 (요즘 점점 증가)

서비스 규모 커질 때 많이 씀

src/
 ├ features/
 │   ├ auth/
 │   │   ├ api.ts
 │   │   ├ components/
 │   │   ├ hooks/
 │   │   └ pages/
 │   │
 │   ├ post/
 │   │   ├ api.ts
 │   │   ├ components/
 │   │   └ pages/
 │
 ├ shared/
 │   ├ components/
 │   ├ hooks/
 │   └ utils/
 │
 ├ layouts/
 ├ routes/
 ├ App.tsx
 └ main.tsx

특징

기능별로 묶음

예

auth
post
comment
profile

👍 장점

기능 단위 개발
협업 좋음
파일 찾기 쉬움

👨‍💻 대형 서비스에서 많이 사용

3️⃣ Atomic 디자인 구조 (디자인 시스템 중심)

디자인 시스템 있는 회사

src/
 ├ components/
 │   ├ atoms/
 │   │   └ Button
 │   │
 │   ├ molecules/
 │   │   └ SearchBox
 │   │
 │   ├ organisms/
 │   │   └ Header
 │
 ├ layouts/
 ├ pages/
 ├ hooks/
 ├ utils/
 └ App.tsx

Atomic 구조

단계	예
atoms	Button
molecules	SearchInput
organisms	Header

👍 장점

UI 구조 체계적

👎 단점

개발자들이 실무에서 싫어하는 경우 많음

⭐ 실무 체감 인기 순위

순위	구조
1️⃣	기본 구조 (pages + components)
2️⃣	Feature 구조
3️⃣	Atomic 디자인

🔥 개인적으로 추천하는 실무 구조

가장 밸런스 좋은 구조

src/
 ├ api/
 ├ assets/
 ├ components/
 ├ features/
 ├ hooks/
 ├ layouts/
 ├ pages/
 ├ routes/
 ├ store/
 ├ utils/
 ├ types/

초기 → pages 중심
프로젝트 커지면 → features 이동

💡 참고로 요즘 React 실무에서 같이 많이 쓰는 것들

빌드: Vite
라우터: React Router
서버 상태: TanStack Query
상태관리: Zustand

원하면 “요즘 React 실무에서 진짜 많이 쓰는 폴더 구조 (2025 표준)” 하나 완성형 템플릿도 보여드릴게요.
이거 그대로 쓰는 회사 꽤 많습니다.

실무에서는 둘 다 쓰이지만, 요즘 React 프로젝트(특히 Next.js, Vite 기반) 기준으로 보면 보통 src 아래에 layout 또는 layouts 폴더를 따로 두는 구조가 더 많이 사용됩니다. 👍

1️⃣ 가장 많이 쓰는 구조 (권장)

layout을 src 바로 아래에 둠

src/
 ├─ components/
 │   ├─ Button.tsx
 │   └─ Modal.tsx
 │
 ├─ layouts/
 │   ├─ MainLayout.tsx
 │   ├─ AuthLayout.tsx
 │   └─ AdminLayout.tsx
 │
 ├─ pages/  (or routes)
 │   ├─ Home.tsx
 │   └─ Login.tsx
 │
 ├─ hooks/
 ├─ utils/
 └─ App.tsx

이유

Layout은 단순 UI 컴포넌트보다 상위 개념
여러 페이지를 감싸는 페이지 구조 역할
components는 재사용 UI 단위만 두는 것이 일반적

예:

<MainLayout>
  <HomePage />
</MainLayout>

2️⃣ components 아래 두는 경우

이 구조도 있긴 합니다.

src/
 ├─ components/
 │   ├─ layout/
 │   │   ├─ Header.tsx
 │   │   ├─ Footer.tsx
 │   │   └─ MainLayout.tsx
 │   └─ ui/
 │       ├─ Button.tsx
 │       └─ Card.tsx

하지만 이 경우 보통 layout 내부 구성요소(Header, Footer) 정도만 둡니다.

3️⃣ 실무에서 많이 보는 구조 (대형 프로젝트)

src/
 ├─ layouts/
 │   ├─ MainLayout/
 │   │   ├─ index.tsx
 │   │   ├─ Header.tsx
 │   │   └─ Footer.tsx
 │   │
 │   └─ AdminLayout/
 │       └─ index.tsx
 │
 ├─ components/
 │   ├─ ui/
 │   └─ common/

Layout 자체도 하나의 모듈처럼 관리합니다.

✅ 정리 (실무 기준)

위치	사용도
`src/layouts`	⭐ 가장 일반적
`src/components/layout`	중소 프로젝트
`src/components` 안에 Layout	권장도 낮음

👉 결론:
src/layouts 폴더 따로 만드는 구조가 실무에서 제일 많습니다.

원하면 **“요즘 React 실무에서 많이 쓰는 src 폴더 구조 TOP 3”**도 실제 회사 스타일로 예시 보여드릴게요. (이거 알면 프로젝트 구조 거의 끝납니다) 🚀

layouts야? layout이야?

실무에서는 **layouts (복수형)**을 더 많이 씁니다. 👍

이유

보통 레이아웃이 여러 개 생기기 때문입니다.

예:

src/
 ├─ layouts/
 │   ├─ MainLayout.tsx
 │   ├─ AuthLayout.tsx
 │   └─ AdminLayout.tsx

각 페이지에서 이렇게 사용합니다.

<MainLayout>
  <HomePage />
</MainLayout>

또는 React Router 같은 라우터에서:

<Route element={<MainLayout />}>
  <Route path="/" element={<Home />} />
</Route>

단수 `layout`을 쓰는 경우

이건 주로 **Next.js**에서 많이 보입니다.

Next.js는 파일 기반 라우팅 때문에:

app/
 ├─ layout.tsx
 ├─ page.tsx

처럼 framework 규칙상 layout 단수 파일을 씁니다.

✅ 정리

상황	추천
일반 React 프로젝트	`layouts`
Next.js app router	`layout` (framework 규칙)

👉 결론:
React + Vite / CRA 같은 일반 프로젝트 → src/layouts 가 가장 보편적입니다.

원하시면 **“실무에서 layout 폴더 안을 어떻게 나누는지 (header/footer/sidebar 위치)”**도 실제 회사 구조 기준으로 보여드릴게요.
이거 잘못 잡으면 프로젝트 커지면 폴더 지옥 됩니다.

실무에서 React 프로젝트의 layouts 폴더 구조는 보통 아래처럼 잡습니다.
핵심은 **레이아웃 자체 + 레이아웃 전용 컴포넌트(Header/Footer 등)**를 같이 묶는 것입니다. 👍

1️⃣ 가장 실무에서 많이 쓰는 구조 (추천)

src/
 ├─ layouts/
 │   ├─ MainLayout/
 │   │   ├─ MainLayout.tsx
 │   │   ├─ Header.tsx
 │   │   ├─ Footer.tsx
 │   │   └─ Sidebar.tsx
 │   │
 │   ├─ AuthLayout/
 │   │   └─ AuthLayout.tsx
 │   │
 │   └─ AdminLayout/
 │       ├─ AdminLayout.tsx
 │       └─ AdminSidebar.tsx
 │
 ├─ components/
 │   ├─ ui/
 │   │   ├─ Button.tsx
 │   │   └─ Card.tsx
 │   │
 │   └─ common/
 │       └─ Modal.tsx

특징

layout 전용 컴포넌트는 layout 폴더 안
재사용 UI는 components

예

파일	위치
Header	layouts
Footer	layouts
Sidebar	layouts
Button	components
Modal	components

2️⃣ MainLayout 실제 코드 예시

import Header from "./Header";
import Footer from "./Footer";

export default function MainLayout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

이렇게 페이지를 감쌉니다.

<MainLayout>
  <HomePage />
</MainLayout>

3️⃣ 라우터에서 Layout 쓰는 방식

(예: React Router)

<Route element={<MainLayout />}>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Route>

4️⃣ 실무에서 자주 만드는 Layout 종류

Layout	용도
MainLayout	일반 페이지
AuthLayout	로그인/회원가입
AdminLayout	관리자
DashboardLayout	서비스 내부

예

/login
/signup
→ AuthLayout

/admin
→ AdminLayout

5️⃣ 실무에서 많이 하는 실수 ⚠️

❌ 이런 구조

components/
  Header
  Footer
  Sidebar

문제

layout 전용 컴포넌트가 components 오염
재사용 구조 깨짐

그래서 보통

layouts 안에 넣음

🔥 실무 고급 구조 (요즘 많이 씀)

src/
 ├─ layouts/
 │   └─ MainLayout/
 │       ├─ index.tsx
 │       ├─ Header.tsx
 │       ├─ Footer.tsx
 │       └─ Sidebar.tsx

import도 깔끔해집니다.

import MainLayout from "@/layouts/MainLayout";

✅ 정리

src
 ├ components → 재사용 UI
 ├ layouts → 페이지 구조
 ├ pages / routes → 화면

레이아웃 내부 구성요소(Header/Footer 등)는 layouts 안에 둔다.

원하면 제가 **“React 실무에서 진짜 많이 쓰는 전체 src 폴더 구조 (대기업/스타트업 공통)”**도 하나 보여드릴게요.
이거 알면 프로젝트 구조 설계 거의 끝납니다. 🚀

이 블로그 검색

Faith & Tech

React 실무에서 많이 쓰는 src 폴더 구조 TOP 3

1️⃣ 기본형 구조 (가장 많이 쓰는 표준)

특징

2️⃣ Feature 기반 구조 (요즘 점점 증가)

특징

3️⃣ Atomic 디자인 구조 (디자인 시스템 중심)

Atomic 구조

⭐ 실무 체감 인기 순위

🔥 개인적으로 추천하는 실무 구조

1️⃣ 가장 많이 쓰는 구조 (권장)

이유

2️⃣ components 아래 두는 경우

3️⃣ 실무에서 많이 보는 구조 (대형 프로젝트)

이유

단수 `layout`을 쓰는 경우

1️⃣ 가장 실무에서 많이 쓰는 구조 (추천)

특징

2️⃣ MainLayout 실제 코드 예시

3️⃣ 라우터에서 Layout 쓰는 방식

4️⃣ 실무에서 자주 만드는 Layout 종류

5️⃣ 실무에서 많이 하는 실수 ⚠️

🔥 실무 고급 구조 (요즘 많이 씀)

댓글

댓글 쓰기

가장 많이 본 글

GitHub 협업 – 이클립스로 깃허브 저장소 연결하기 (팀원버전)

Weekly Retrospective(주간 회고) - 5주차

React 실무에서 많이 쓰는 src 폴더 구조 TOP 3

1️⃣ 기본형 구조 (가장 많이 쓰는 표준)

특징

2️⃣ Feature 기반 구조 (요즘 점점 증가)

특징

3️⃣ Atomic 디자인 구조 (디자인 시스템 중심)

Atomic 구조

⭐ 실무 체감 인기 순위

🔥 개인적으로 추천하는 실무 구조

1️⃣ 가장 많이 쓰는 구조 (권장)

이유

2️⃣ components 아래 두는 경우

3️⃣ 실무에서 많이 보는 구조 (대형 프로젝트)

이유

단수 layout을 쓰는 경우

1️⃣ 가장 실무에서 많이 쓰는 구조 (추천)

특징

2️⃣ MainLayout 실제 코드 예시

3️⃣ 라우터에서 Layout 쓰는 방식

4️⃣ 실무에서 자주 만드는 Layout 종류

5️⃣ 실무에서 많이 하는 실수 ⚠️

🔥 실무 고급 구조 (요즘 많이 씀)

댓글

댓글 쓰기

가장 많이 본 글

GitHub 협업 – 이클립스로 깃허브 저장소 연결하기 (팀원버전)

Weekly Retrospective(주간 회고) - 5주차

단수 `layout`을 쓰는 경우