React 프로젝트 구조 이해하기
SPA(Single Page Application)의 강자로 React, Vue를 많이 사용하고 있습니다.
React를 이용하여 웹 애플리케이션을 만들기위해 컴포넌트 이해부터 필요합니다. 본격적인 문법에 앞서 이전 글에서 프로젝트 생성하고 실행하는 방법으로 전체적인 흐름을 봤습니다. 하지만 생성된 프로젝트의 세부 내용은 언급하지 않았습니다. 앞으로 React 프로젝트를 진행할 때 항상 접하게 되는 프로젝트 구성과 파일 구동 원리를 본 글에서는 이해하고 넘어가겠습니다.
1. React 프로젝트 시작하기
이 전 글을 통해 프로젝트가 생성되었다면 그대로 이용할 수 있으며, 본 글을 처음 읽은 경우라면 React 프로젝트 생성이 필요합니다. 구체적인 방법은 이전 글을 통해 학습하시길 바라며 이 글이에서는 절차를 간략히 작성합니다.
npx create-react-app my-app
cd my-app
npm start
이 명령을 실행하면 my-app이라는 새로운 React 프로젝트가 생성됩니다. 이제 폴더 구조를 살펴보겠습니다.
2. React 프로젝트 폴더 구조
처음 생성된 my-app 폴더를 VS Code로 열어서 본 내부에는 여러 개의 폴더와 파일이 생성되어 있습니다.
아래는 기본 폴더 구조와 용도를 정리하였습니다. node_modules/ 폴더는 필요한 패키지들의 모음이므로 설치할 때마다 추가되는 것을 볼 수 있습니다. 실제 프로젝트 진행하면서 우리가 직접 다뤄야하는 폴더 위주로 설명해 보겠습니다.
my-app/
│── node_modules/ # 프로젝트에서 사용하는 패키지들이 저장되는 폴더
│
│── public/ # 정적 파일이 위치하는 폴더 (index.html 포함)
│
│── src/ # 주요 React 코드들이 포함된 폴더
│
│── .gitignore # Git에서 제외할 파일 목록
│
│── package.json # 프로젝트 설정 및 종속성 목록
│
│── README.md # 프로젝트 설명 문서
2.1 public/ 폴더
- 이 폴더는 정적 파일을 보관하는 곳입니다.
- React는 SPA(Single Page Application) 방식으로 동작하며, index.html 파일을 중심으로 모든 컴포넌트가 렌더링됩니다.
- 즉, 사용자가 웹사이트에 접근하면 브라우저는 이 index.html 파일을 불러오고, 해당 파일 안에 존재하는 <div id="root"></div> 요소 안에 React의 모든 컴포넌트가 동적으로 삽입됩니다.
- React는 index.html을 기본 템플릿으로 유지하면서, src/ 폴더 내의 JavaScript 코드가 실행되어 동적인 웹 애플리케이션을 구성합니다.
- 이를 통해 전체 페이지를 새로고침하지 않고도 특정 UI 요소만 업데이트할 수 있는 특징을 가집니다.
- 결과적으로, 사용자는 더 빠른 인터페이스 응답 속도와 부드러운 사용자 경험을 제공받게 됩니다.
public/index.html
이 파일은 React 앱의 진입점이 됩니다. 중요한 부분은 다음과 같습니다. 실제 생성된 부분 중 주석 등 불필요한 부분을 제외하고 필요한 구조만 작성한 내용입니다. 실제 내용을 확인해보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- <div id="root"></div>: React 앱이 이 요소 안에 렌더링됩니다.
- 이 HTML 파일은 브라우저가 처음으로 읽는 파일이지만, React 애플리케이션이 실행되면서 실제로 화면을 구성하는 것은 src/ 폴더의 코드입니다. 전체 코드의 연결이 어떻게 되는지를 이해하는게 가장 먼저 React를 이해하는 길입니다. 따라서 index.html 파일의 존재를 기억하고 있어야 합니다. 이 파일의 내용을 특별히 변경할 필요도 없습니다.
- index.html 파일은 템플릿 역할을 하며, React 컴포넌트가 root div 내부에 동적으로 삽입됩니다.
2.2 src/ 폴더
React 프로젝트의 핵심 코드가 들어가는 폴더입니다. 기본적으로 다음과 같은 파일들이 있습니다.
src/
│── App.js # 메인 컴포넌트
│
│── index.js # React 애플리케이션의 진입점
│
│── App.css # 스타일 파일
│
│── index.css # 전역 스타일 파일
│
│── logo.svg # 기본 로고 파일
│
│── reportWebVitals.js # 성능 측정을 위한 파일
src/index.js
이 파일은 React 애플리케이션의 시작점입니다. 앞서 index.html 파일과 어떻게 연결되는지를 이해할 수 있는 부분이므로 중요한 역할을 하는 파일입니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
- 여기서 ReactDOM.createRoot(document.getElementById('root'))를 사용하여 <div id="root"></div>에 React 애플리케이션을 마운트합니다.
- 즉, index.js 파일은 index.html에 있는 root div를 찾아서 React 컴포넌트를 해당 요소 내부에 삽입합니다.
- 그렇다면 실제 화면에 나와야하는 디자인을 담당하는 부분이 어디인지가 남아있습니다. 바로 App.js 파일이 메인 컴포넌트로서 화면을 구성합니다. 해당 파일은 src/폴더에 위치합니다. <App /> 는 App.js 컴포넌트를 추가하는 방법입니다.
src/App.js
드디어 화면을 구성하는 가장 기본 컨포넌트의 모습을 다음 코드에서 볼 수 있습니다. 처음 프로젝트를 생성하면 다음과 같은 기본적인 React 컴포넌트를 포함 시켜 줍니다. 웹 페이지의 골격을 만들어주는 <> 태그들이 보입니다.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
프로젝트 폴더의 터미널에서 실행 명령어를 다음과 같이 실행한 후 결과를 확인할 수 있습니다.
npm start
기본으로 추가되어 있던 내용의 결과는 우리에게 필요하지 않고 단지 전체 코드 골격을 알아 둘 필요가 있습니다. 따라서 function App() 함수 중에서 필요한 부분만 남기고 제거하였습니다. 그리고 다시 실행했을 때 Welcome 메시지만 보여질 수 있도록 다음과 같이 정리해 보세요.
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Welcome to React!</h1>
</div>
);
}
export default App;
다시 프로젝트 실행하면 이제 우리의 첫 변경된 화면이 보여 집니다. 앞으로 컴포넌트를 다양하게 활용하면서 이해하는 부분이 남아 있지만 본 글에서는 프로젝트 폴더 내의 파일이 어떻게 연결되는지를 이해하면 됩니다.
- 여기서 App 컴포넌트는 React에서 가장 기본적인 구성 요소입니다.
- 이 컴포넌트는 index.js에서 root 요소에 렌더링됩니다.
- 즉, 애플리케이션이 실행되면 index.js가 App.js를 로드하고, App.js는 JSX(JavaScript XML)를 사용하여 UI를 반환하며, 결과적으로 브라우저 화면에 표시됩니다.
- 컴포넌트(App.js), React 애플리케이션 시작(index.js)시점 부터 웹 페이지에서 읽어 들이는 파일(index.html) 파일의 연결은 다음과 같이 이뤄지는 것을 다시 한번 정리합니다.
3. package.json 파일 이해하기
이 파일은 프로젝트의 메타데이터와 종속성을 관리합니다. 주요 섹션은 다음과 같습니다.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
- dependencies: 프로젝트에서 사용하는 패키지 목록
- scripts: 프로젝트 실행, 빌드, 테스트 명령어 정의를 보여주고 있습니다. build하거나 실행 명령어를 참고할 수 있도록 자동 생성되어 있습니다.
4. 정리
React 프로젝트를 처음 만들면 기본적인 구조가 자동으로 생성됩니다.
- public/ 폴더에는 index.html 파일이 있으며, 이 파일이 React 애플리케이션의 틀이 됩니다.
- src/index.js는 React 애플리케이션의 진입점 역할을 하며, index.html의 root div 내부에 React 요소를 삽입합니다.
- App.js는 메인 컴포넌트로서 UI를 렌더링합니다.
React의 기본적인 실행 흐름을 이해하면 프로젝트를 보다 쉽게 수정하고 원하는 기능을 추가할 수 있습니다. 이제 React 프로젝트를 직접 수정하려면 React의 문법이 익혀져야 합니다. 앞으로 몇 개의 글을 통해 React 기본 문법을 정리해보겠습니다.🚀
'프로그래밍언어 > React' 카테고리의 다른 글
| [React문법2]React 컴포넌트의 이해 (1) | 2025.03.20 |
|---|---|
| [React 개발환경4]VSCode에서 직접 Git+Github연동! (0) | 2025.02.20 |
| [React 개발환경3]GitBash 이용! VSCode+Git+Github연동 (0) | 2025.02.19 |
| [React 개발환경2]VSCode for React! (0) | 2025.02.17 |
| [React 개발환경1]먼저 Node.js를 설치해볼까! (1) | 2025.02.16 |