03. React 프로젝트 구조 이해하기
1. React 프로젝트 구조란?
React 프로젝트는 기능별로 파일을 나누어 관리합니다.
HTML처럼 모든 내용을 하나의 파일에 작성하는 것이 아니라, 화면을 여러 개의 컴포넌트(Component)와 폴더로 분리하여 개발합니다.
프로젝트가 커질수록 이러한 구조는 유지보수와 협업에 큰 장점을 제공합니다.
2. 기본 프로젝트 구조
Vite로 React 프로젝트를 생성하면 다음과 같은 구조가 만들어집니다.
dongbusan-react
│
├── node_modules
├── public
├── src
│ ├── assets
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
│
├── package.json
├── package-lock.json
└── vite.config.js
실제 개발은 대부분 src 폴더 안에서 이루어집니다.
3. src 폴더
src(Source)는 프로젝트의 실제 소스코드를 작성하는 공간입니다.
예를 들어 동부산CC 프로젝트라면
src
│
├── components
├── pages
├── assets
├── data
├── App.jsx
├── main.jsx
└── index.css
이와 같이 구성하는 것이 일반적입니다.
4. assets 폴더
이미지, 아이콘, 동영상, 폰트 등을 저장하는 폴더입니다.
예시
assets
│
├── images
├── icons
├── videos
└── logo.svg
사용 예
import logo from "./assets/logo.svg";
<img src={logo} alt="logo" />
5. components 폴더
React에서 가장 많이 사용하는 폴더입니다.
화면을 작은 단위로 나누어 관리합니다.
동부산CC 예시
components
│
├── Header.jsx
├── Hero.jsx
├── CourseCard.jsx
├── CourseSection.jsx
├── Gallery.jsx
├── Reservation.jsx
├── Notice.jsx
└── Footer.jsx
각 컴포넌트는 하나의 기능만 담당하는 것이 좋습니다.
6. pages 폴더
페이지 단위 컴포넌트를 관리합니다.
예시
pages
│
├── Home.jsx
├── Course.jsx
├── Reservation.jsx
├── Gallery.jsx
└── Contact.jsx
React Router를 사용할 때 많이 활용됩니다.
7. data 폴더
데이터를 별도로 관리하는 폴더입니다.
예시
data
│
├── courseData.js
├── noticeData.js
└── galleryData.js
courseData.js
export const courseData = [
{
id:1,
title:"EAST COURSE"
}
];
컴포넌트에서는
import { courseData } from "../data/courseData";
와 같이 불러와 사용합니다.
8. App.jsx
App.jsx는 프로젝트의 중심이 되는 컴포넌트입니다.
각 컴포넌트를 조립하여 하나의 화면을 만듭니다.
예시
import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer";
function App(){
return(
<>
<Header />
<Hero />
<Footer />
</>
)
}
export default App;
App.jsx는 집의 설계도와 같은 역할을 합니다.
9. main.jsx
React 프로젝트의 시작점입니다.
App.jsx를 브라우저에 출력합니다.
예시
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(
<App />
);
main.jsx → App.jsx → Header → Hero → Footer 순으로 실행됩니다.
10. index.css
프로젝트 전체에 적용되는 공통 스타일을 작성합니다.
예시
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial;
}
공통 스타일은 index.css에 작성하고, 특정 컴포넌트만 사용하는 스타일은 컴포넌트별 CSS 파일로 분리하기도 합니다.
11. React 프로젝트 실행 흐름
React 프로젝트는 다음과 같은 순서로 실행됩니다.
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
Course
↓
Gallery
↓
Reservation
↓
Footer
즉, main.jsx가 시작점이며 App.jsx가 화면을 조립하는 중심 역할을 합니다.
12. 동부산CC 프로젝트 구조 예시
src
│
├── assets
│ ├── images
│ └── videos
│
├── components
│ ├── Header.jsx
│ ├── Hero.jsx
│ ├── CourseSection.jsx
│ ├── CourseCard.jsx
│ ├── CourseModal.jsx
│ ├── Gallery.jsx
│ ├── Reservation.jsx
│ ├── Notice.jsx
│ └── Footer.jsx
│
├── data
│ ├── courseData.js
│ ├── galleryData.js
│ └── noticeData.js
│
├── pages
│ ├── Home.jsx
│ ├── Course.jsx
│ ├── Gallery.jsx
│ └── Contact.jsx
│
├── App.jsx
├── main.jsx
└── index.css
이 구조는 실제 실무 프로젝트에서도 자주 사용하는 형태입니다.
정리
React 프로젝트는 기능별로 폴더와 파일을 분리하여 관리합니다.
main.jsx : 프로젝트 시작점
App.jsx : 화면 조립
components : 재사용 가능한 UI
pages : 페이지 단위 구성
data : 데이터 관리
assets : 이미지·아이콘·동영상 등 리소스
index.css : 공통 스타일
프로젝트를 체계적으로 구성하면 코드의 재사용성이 높아지고, 유지보수와 협업이 훨씬 쉬워집니다.
1. React 프로젝트 구조란?
React 프로젝트는 기능별로 파일을 나누어 관리합니다.
HTML처럼 모든 내용을 하나의 파일에 작성하는 것이 아니라, 화면을 여러 개의 컴포넌트(Component)와 폴더로 분리하여 개발합니다.
프로젝트가 커질수록 이러한 구조는 유지보수와 협업에 큰 장점을 제공합니다.
2. 기본 프로젝트 구조
Vite로 React 프로젝트를 생성하면 다음과 같은 구조가 만들어집니다.
dongbusan-react
│
├── node_modules
├── public
├── src
│ ├── assets
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
│
├── package.json
├── package-lock.json
└── vite.config.js
실제 개발은 대부분 src 폴더 안에서 이루어집니다.
3. src 폴더
src(Source)는 프로젝트의 실제 소스코드를 작성하는 공간입니다.
예를 들어 동부산CC 프로젝트라면
src
│
├── components
├── pages
├── assets
├── data
├── App.jsx
├── main.jsx
└── index.css
이와 같이 구성하는 것이 일반적입니다.
4. assets 폴더
이미지, 아이콘, 동영상, 폰트 등을 저장하는 폴더입니다.
예시
assets
│
├── images
├── icons
├── videos
└── logo.svg
사용 예
import logo from "./assets/logo.svg";
<img src={logo} alt="logo" />
5. components 폴더
React에서 가장 많이 사용하는 폴더입니다.
화면을 작은 단위로 나누어 관리합니다.
동부산CC 예시
components
│
├── Header.jsx
├── Hero.jsx
├── CourseCard.jsx
├── CourseSection.jsx
├── Gallery.jsx
├── Reservation.jsx
├── Notice.jsx
└── Footer.jsx
각 컴포넌트는 하나의 기능만 담당하는 것이 좋습니다.
6. pages 폴더
페이지 단위 컴포넌트를 관리합니다.
예시
pages
│
├── Home.jsx
├── Course.jsx
├── Reservation.jsx
├── Gallery.jsx
└── Contact.jsx
React Router를 사용할 때 많이 활용됩니다.
7. data 폴더
데이터를 별도로 관리하는 폴더입니다.
예시
data
│
├── courseData.js
├── noticeData.js
└── galleryData.js
courseData.js
export const courseData = [
{
id:1,
title:"EAST COURSE"
}
];
컴포넌트에서는
import { courseData } from "../data/courseData";
와 같이 불러와 사용합니다.
8. App.jsx
App.jsx는 프로젝트의 중심이 되는 컴포넌트입니다.
각 컴포넌트를 조립하여 하나의 화면을 만듭니다.
예시
import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer";
function App(){
return(
<>
<Header />
<Hero />
<Footer />
</>
)
}
export default App;
App.jsx는 집의 설계도와 같은 역할을 합니다.
9. main.jsx
React 프로젝트의 시작점입니다.
App.jsx를 브라우저에 출력합니다.
예시
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(
<App />
);
main.jsx → App.jsx → Header → Hero → Footer 순으로 실행됩니다.
10. index.css
프로젝트 전체에 적용되는 공통 스타일을 작성합니다.
예시
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial;
}
공통 스타일은 index.css에 작성하고, 특정 컴포넌트만 사용하는 스타일은 컴포넌트별 CSS 파일로 분리하기도 합니다.
11. React 프로젝트 실행 흐름
React 프로젝트는 다음과 같은 순서로 실행됩니다.
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
Course
↓
Gallery
↓
Reservation
↓
Footer
즉, main.jsx가 시작점이며 App.jsx가 화면을 조립하는 중심 역할을 합니다.
12. 동부산CC 프로젝트 구조 예시
src
│
├── assets
│ ├── images
│ └── videos
│
├── components
│ ├── Header.jsx
│ ├── Hero.jsx
│ ├── CourseSection.jsx
│ ├── CourseCard.jsx
│ ├── CourseModal.jsx
│ ├── Gallery.jsx
│ ├── Reservation.jsx
│ ├── Notice.jsx
│ └── Footer.jsx
│
├── data
│ ├── courseData.js
│ ├── galleryData.js
│ └── noticeData.js
│
├── pages
│ ├── Home.jsx
│ ├── Course.jsx
│ ├── Gallery.jsx
│ └── Contact.jsx
│
├── App.jsx
├── main.jsx
└── index.css
이 구조는 실제 실무 프로젝트에서도 자주 사용하는 형태입니다.
정리
React 프로젝트는 기능별로 폴더와 파일을 분리하여 관리합니다.
main.jsx : 프로젝트 시작점
App.jsx : 화면 조립
components : 재사용 가능한 UI
pages : 페이지 단위 구성
data : 데이터 관리
assets : 이미지·아이콘·동영상 등 리소스
index.css : 공통 스타일
프로젝트를 체계적으로 구성하면 코드의 재사용성이 높아지고, 유지보수와 협업이 훨씬 쉬워집니다.
#03. React 프로젝트 구조 이해하기