React + Vite에서 index.html의 역할은?
React + Vite 프로젝트를 시작하면 index.html 파일이 루트 디렉토리에 존재합니다.
이 파일은 단순한 HTML 문서처럼 보이지만, Vite 기반 React 앱에서는 매우 핵심적인 역할을 합니다.
1. 초기 HTML 뼈대 제공
<div id="root"></div>- 이 div는 React가 렌더링을 시작할 DOM 노드입니다.
- React는 Virtual DOM을 통해 이 #root 안에 컴포넌트를 렌더링합니다.
- 이게 없으면 화면에 아무것도 출력되지 않습니다.
React는 이
#root를 기준으로 실제 DOM을 덮어씌웁니다.
2. React 앱과 연결하는 진입점
<script type="module" src="/src/main.jsx"></script>- 이 스크립트는 React 애플리케이션의 시작점(
main.jsx)을 불러옵니다. - 보통
main.jsx안에는 아래와 같은 코드가 있습니다:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);- 이 코드를 통해 React는
#rootDOM 요소를 찾아<App />컴포넌트를 렌더링합니다.
3. Vite 개발 서버의 기준 파일
- Vite는 기존 CRA(Create React App)과 다르게,
index.html을 앱의 진입점으로 직접 사용합니다. - 개발 서버를 실행하면 브라우저는 이
index.html부터 로딩을 시작합니다. - Vite는 내부적으로 이 파일을 분석해서 script, module, css 등을 처리합니다.
CRA에서는
index.html이 별도(public 폴더)에 있어 직접 제어가 제한적이지만,
Vite에서는 직접 모듈(script) type="module"로 불러올 수 있어 더 유연하고 빠름.
정리: 왜 꼭 필요한가?
| 역할 | 설명 |
|---|---|
| 초기 구조 제공 | React 앱이 렌더링될 #root를 제공 |
| 모듈 연결 | React 앱의 진입점인 main.jsx를 로딩 |
| 메타정보 관리 | 타이틀, 파비콘, 뷰포트 등 설정 |
| Vite 서버 기준 | Vite는 index.html을 중심으로 앱을 구성 |
추가
- 이 파일은 수정할 일이 거의 없지만, 타이틀(title), 파비콘(favicon) 정도는 자주 바꿉니다.
#root외부 영역은 React의 제어를 받지 않기 때문에 정적 요소만 배치 가능합니다.- Vite의 빠른 번들링과 Hot Reload는 이 구조 덕분에 동작합니다.
요약
index.html은 React가 렌더링을 시작할 수 있도록 도와주는 출발점- 특히 Vite 기반에서는 이 HTML 파일이 애플리케이션 구조의 핵심
donggyun_ee