React index 렌더링 과정

App.jsx -> main.jsx -> index.html

1. index.html (실제 브라우저에 보여지는 HTML 뼈대)

React가 실제 DOM에 앱을 끼워 넣는 자리(마운트 포인트)

<div id="root"></div>

2. main.jsx (React 진입 파일, 엔트리포인트)

index.html 안의 root 요소 가져오기

const root = document.querySelector("#root");

그 root에 React 컴포넌트를 렌더링하기

import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const create = createRoot(root);
create.render(<App />);

-> main.jsx는 index.html의 div id="root"와 React의 가상 DOM을 연결하는 다리 역할

3. App.jsx (실제 화면에 보여줄 첫 컴포넌트)

• React에서는 화면을 작은 단위인 컴포넌트로 나누어 관리
• 그중에서 App.jsx는 애플리케이션의 최상위 컴포넌트
• main.jsx에서 을 root에 붙여주면, 그 안에 들어 있는 JSX(리액트 문법 HTML) 구조가 화면에 표시

function App() {
  return (
    <div>
      <h1>안녕하세요 React!</h1>
    </div>
  );
}
export default App;

전체 흐름 정리

1. 브라우저가 index.html을 읽는다 → #root라는 빈 껍데기 div가 있다.
2. main.jsx가 실행된다 → root 요소를 찾아 React 렌더링 엔진(createRoot)을 붙인다.
3. App.jsx 컴포넌트를 main.jsx가 root에 렌더링한다 → 화면에 내용이 나타난다.