📌 React 프로젝트를 처음 시작하면 main.jsx와 App.jsx라는 파일이 기본적으로 생성됩니다.
이 두 파일이 각각 어떤 역할을 하는지, 그리고 React가 실행되는 과정에서 어떻게 동작하는지 쉽게 이해할 수 있도록 설명해보겠습니다.
🔹 1. main.jsx와 App.jsx는 왜 필요한가?
React에서는 하나의 애플리케이션을 여러 개의 작은 컴포넌트(Component)로 나누어 관리합니다.
그중 main.jsx와 App.jsx는 기본적인 구조를 담당하는 핵심 파일입니다.
✔️ main.jsx → React 애플리케이션을 실행하는 진입점
✔️ App.jsx → 실제 화면을 구성하는 메인 컴포넌트
이제 각각의 파일을 자세히 살펴보겠습니다.
🔹 2. React의 기본 파일 구조
📁 React 프로젝트의 src 폴더 안에서 주로 작업하게 됩니다.
📂 my-app/
├── index.html ← 기본 HTML 파일
📂 my-app/src/
├── main.jsx ← React 애플리케이션을 실행하는 파일
├── App.jsx ← UI를 구성하는 컴포넌트
🔹 3. main.jsx의 역할 – React 앱을 실행하는 메인 파일
📍 src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; // App 컴포넌트를 불러오기
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App user="Alice" />); // App 컴포넌트를 실행하면서 user 속성을 전달🔍 main.jsx에서 하는 일
✔️ import App from "./App"; → App.jsx에서 만든 컴포넌트를 가져옴.
✔️ ReactDOM.createRoot(document.getElementById("root")); → index.html의 <div id="root"> 요소를 찾아서 React 앱을 렌더링할 준비.
✔️ root.render(<App user="Alice" />); → App을 실행하면서 user 값을 전달.
즉, main.jsx는 React 애플리케이션의 시작점 역할을 합니다.
🔹 4. App.jsx의 역할 – 실제 화면을 구성하는 컴포넌트
📍 src/App.jsx
import React from "react";
function App(props) {
return <h1>Hello World {props.user}</h1>;
}
export default App; // 다른 파일(main.jsx)에서 사용하려면 export 해야 함🔍 App.jsx에서 하는 일
✔️ App 컴포넌트는 화면에 표시될 내용을 정의.
✔️ props.user 값을 받아 "Hello World Alice"을 화면에 출력.
✔️ export default App; → 다른 파일에서도 이 컴포넌트를 사용할 수 있도록 내보내기.
즉, App.jsx는 React 앱의 메인 UI를 담당하는 역할을 합니다.
🔹 5. index.html과의 관계
📍 my-app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div> <!-- React 앱이 렌더링될 곳 -->
</body>
</html>✔️ main.jsx는 document.getElementById("root")를 찾아서 React 앱을 이 안에 렌더링합니다.
✔️ index.html은 실제 HTML 파일이지만, 화면의 모든 내용은 React에서 동적으로 변경됩니다.
즉, index.html은 React의 UI를 표시할 기본적인 HTML 컨테이너 역할을 합니다.
🔹 6. React 실행 과정
React 앱이 실행될 때, 각 파일이 어떤 역할을 하는지 시각적으로 정리하면 다음과 같습니다.
main.jsx ─────────▶ App.jsx ─────────▶ 화면에 렌더링
(React 실행) (UI 구성) (<h1>Hello World Alice</h1>)🔹 7. 실험해보기 – props 값 변경
📍 main.jsx에서 user 값을 변경하면 결과가 바뀌는지 확인하세요!
root.render(<App user="John" />);✔️ 이렇게 하면 화면에 "Hello World John"이 출력됩니다!
📍 App.js에서 기본값을 설정하면, user 값을 전달하지 않아도 동작할 수 있습니다.
function App({ user = "Guest" }) {
return <h1>Hello World {user}</h1>;
}✔️ index.js에서 user 값을 주지 않으면 "Hello World Guest"가 출력됩니다.
🔹 8. 정리 – main.jsx와 App.jsx를 나누는 이유
✅ main.jsx는 React 애플리케이션을 실행하는 진입점
✅ App.jsx는 화면을 구성하는 메인 컴포넌트
✅ main.jsx에서 App.jsx를 root.render(<App user="Alice" />);로 실행
✅ App.jsx에서는 props.user를 받아 "Hello World Alice"를 출력
✅ React의 컴포넌트 기반 개발 방식을 이해하면 유지보수가 쉬워짐!
🔹 9. 마무리 – 더 쉽게 이해하는 방법
✔️ main.jsx는 React의 메인 컨트롤러 역할을 함.
✔️ App.jsx는 실제 화면을 담당하는 컴포넌트 역할을 함.
✔️ 컴포넌트 기반 구조 덕분에 UI를 쉽게 나누고 재사용 가능.
✔️ props를 활용하면 유연한 컴포넌트 설계가 가능.
💡 React 구조를 확실히 이해하고 싶다면?
- 직접
main.jsx에서App.jsx를 여러 번 호출하면서 props 값을 바꿔보기 App.jsx에 여러 개의 컴포넌트를 추가해서 UI를 구성해보기console.log(props)를 추가해서 props가 어떻게 전달되는지 확인하기
이상 입니다.
'개발 > React' 카테고리의 다른 글
| 'React' is not defined. 에러 해결 (0) | 2025.03.11 |
|---|---|
| Window 환경에서 리액트(React) 설치 (0) | 2025.02.13 |