React - main.jsx (index.js)에서 하는 일

React 18 버전 이전에는 index.js파일이 존재했는데

현재 18버전 이후 main.jsx파일로 대체 되었다.

 

보통 index.js에서 ReactDOM.render()를 사용해서

React 애플리케이션을 root에 렌더링을 했었다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

React 18 이후부터는 ReactDOM.createRoot() 방식이 도입되면서

Vite 프로젝트에서는 index.js 대신 main.jsx가 기본 파일명으로 사용된다.

 

파일이 변경된 이유는 다음과 같다.

 

• Vite의 기본 구조 변화
  • Vite 프로젝트를 생성하면 index.js 대신 main.jsx가 기본 파일명으로 생성됨.
  • Vite는 빠른 개발 환경을 제공하므로, 기존 CRA(Create React App)보다 더 가벼운 구조를 가짐.
• React 18의 새로운 렌더링 방식 적용
  • ReactDOM.render() → ReactDOM.createRoot().render() 방식 변경
  • 이에 따라 새로운 파일명을 적용하여 혼동을 줄임 (index.js 대신 main.jsx 사용)

그렇다면 main.jsx가 정확히 하는 일이 무엇일까?

---

 

main.jsx

참고로 main.jsx는 단순히 파일명일 뿐이다.

프로젝트에 따라 index.js, index.jsx, root.jsx등 이름을 사용할 수 도 있다.

그러나 Vite의 기본 설정에서는 main.jsx가 기본 파일명으로 제공되기 때문에

그대로 사용하는 것이 일반적이다.

 

우선 main.jsx는 한마디로 정의하자면 React 앱의 시작점이자 루트 렌더링을 담당하는 핵심 파일 이다.

즉, React 앱을 HTML에 연결하고, 루트 컴포넌트(App)를 렌더링하는 역할을 한다.

 

▼ HTML의 #root에 React 앱을 연결

React는 index.html의 <div id="root"></div> 안에 컴포넌트를 랜더링한다.

index.html (main.jsx가 실행되기 전)

여기서 main.jsx가 실행되면 div 안에 React 컴포넌트(App)가 랜더링되는 것이다.

 

▼ React 앱을 초기화 하고 렌더링

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx' // 루트 컴포넌트 가져오기

// HTML에서 id가 root인 요소를 찾아 루트 컴포넌트를 렌더링하고
// createRoot 함수를 사용하여 렌더링을 시작한다.
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

 

코드를 분석해보면 다음과 같다.

 

• import { StrictMode } from "react";
  • StrictMode는 React 개발 중 잠재적인 문제를 감지하는 모드로, 개발 환경에서만 적용됨.
  • 예를 들어, React 18에서는 useEffect가 의도적으로 두 번 실행되는데, 이는 Strict Mode 때문.
• import { createRoot } from "react-dom/client";
  • ReactDOM.createRoot()를 사용하여 React 18의 새로운 렌더링 방식 적용.
  • ReactDOM.render() 대신 createRoot()를 사용하면 Concurrent Mode(병렬 렌더링) 가능.
• import App from "./App";
  • App.jsx에서 기본 컴포넌트를 가져와서 렌더링.
• document.getElementById("root")
  • index.html에 있는 <div id="root"></div>를 찾아서 React 애플리케이션을 그 안에 렌더링.
• createRoot(document.getElementById("root") ).render(...)
  • document.getElementById("root")를 createRoot 내부에서 바로 사용하였으며
    index.html에 있는 <div id="root"></div>를 찾아서 <App />을 렌더링.

실행 과정은 다음과 같다.

• 브라우저가 index.html 을 로드함
• <script type="module" src="/src/main.jsx"></script>을 실행
• main.jsx가 실행되어 #root에 App을 랜더링함
• App.jsx의 내용이 화면에 표시됨

즉 정리하면 다음과 같다.

• main.jsx는 React 애플리케이션의 진입점
• Vite 프로젝트에는 main.jsx가 기본 파일명으로 사용됨
• #root 요소를 찾아서 React 컴포넌트를 랜더링
• React 18 부터 ReactDOM.createRoot()을 사용하여
  최적화된 랜더링 방식 채택
• App.jsx를 가져와서 화면에 랜더링하는 역할 수행