#root에서 App 화면까지, 세 파일이 한 경로로 잇는다

Vite는 index.html을 entry로 제공한다. main.jsx가 DOM node에 React root를 만들고 App.jsx의 JSX를 그 안에 표시한다.

01

index.html

DOM 자리 <div id="root"></div>

브라우저가 먼저 읽는 HTML entry.

02

src/main.jsx

React 연결 createRoot(#root)root.render(<App />)
03

src/App.jsx

UI 반환 function App() → JSX

문구·컴포넌트를 바꾸는 첫 수정 지점.

04

Browser

React 관리 영역 #root → App UI

저장하면 Vite HMR이 변경을 반영.

빈 화면 진단① #root 존재② selector 일치③ App import·export④ console 오류

관리 경계: root.render 뒤 React는 #root 내부 DOM을 관리한다. root가 없거나 selector가 다르면 연결되지 않는다.