React 앱은 어떻게 작동할까?
우리는 npm run dev 한 줄로 앱을 실행하지만, 그 내부에서는 많은 일이 일어난다.
React 앱이 브라우저에 렌더링되기까지의 흐름을 따라가보자
1. 브라우저는 어디부터 읽을까?
React 앱은 결국 HTML, CSS, JavaScript로 동작한다.
npm run dev를 실행하면 개발 서버가 열리고, 브라우저는 루트 HTML 파일인 index.html을 불러온다.
<!-- index.html -->
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
여기서 핵심은 두 가지다:
- div#root : React가 실제 DOM에 렌더링될 자리
- main.jsx : 앱의 진입점 (entry point)
2. 진입점(main.jsx) 에서는 무슨 일이?
main.jsx 는 App.jsx 를 ReactDOM 을 통해 #root에 렌더링한다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);요약
main.jsx 는 "React야, 저기 #root DOM 요소 안에 App 컴포넌트를 렌더링해줘" 라고 명령하는 역할이다
3. App.jsx 는 컴포넌트의 시작점
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
App.jsx 는 React 컴포넌트로서 JSX 문법을 이용해 UI 구조를 정의한다.
이 컴포넌트는 이후 다른 컴포넌트들을 포함하며 컴포넌트 트리를 구성한다.
4. Virtual DOM과 실제 DOM
React는 Virtual DOM이라는 가상의 트리를 메모리에서 만들고, 변화가 생기면 실제 DOM과 비교하여 최소한의 변경만 적용한다.
- 초기 렌더링: 전체 컴포넌트를 Virtual DOM에 그린 후, 실제 DOM에 반영
- 상태(state) 변경: 변경된 부분만 찾아서 실제 DOM에 갱신
이 과정 덕분에 React 앱은 빠르게 동작하고, UI가 효율적으로 업데이트된다.
5. 개발 도구 (ex: Vite)가 하는 일
index.html 을 시작 파일로 삼고,
- main.jsx -> App.jsx -> ... 순으로 모든 모듈을 분석하여 번들링 없이 실행,
- 변경사항이 생기면 자동으로 반영 (HMR: Hot Module Replacement)
브라우저는 개발 서버가 제공하는 최신 JavaScript 모듈을 그대로 받아 실행한다.
6. 전체 흐름 요약
- 브라우저가 index.html 로딩
- <script type="module" src="main.jsx"> 실행
- main.jsx 에서 App.jsx 를 #root 에 렌더링
- React는 Virtual DOM을 만들어 실제 DOM과 동기화
- 상태 변경 시 필요한 부분만 다시 렌더링
'Node.js > React' 카테고리의 다른 글
| [React] JSX로 UI 표현하기 (0) | 2025.05.05 |
|---|---|
| [React] 리액트 컴포넌트란? 함수로 만드는 UI 조각 (0) | 2025.05.05 |
| [React] React App 생성하기 (0) | 2025.05.04 |
| [React] 리액트란 무엇인가? (0) | 2025.05.04 |
| [React] Quick Start - 1 (0) | 2025.02.18 |