앞서 간단하게 root DOM node에 알아본 적이 있는데 이해가 정확히 되지 않아
다시 한 번 짚으면 좋을 거 같아서 정리해본다!
중요한 부분인 만큼 확실하게 넘어가장
1. root DOM node란?
- root DOM node는 리액트 어플리케이션이 브라우저의 HTML 페이지에 렌더링되는 시작점이다.
- 리액트 어플리케이션 전체가 "이 div 안에서 동작한다"고 생각하면 된다.
- HTML에서 보통 이렇게 생겼다:
<div id="root"></div>- 여기서
<div id="root">는 리액트가 모든 콘텐츠를 렌더링하고, 업데이트하며, 관리하는 DOM 요소이다.
2. 왜 root DOM node가 필요할까?
리액트는 SPA(Single Page Application) 구조를 기반으로 동작한다. SAP는 웹 페이지 전체를 새로고침하지 않고, 하나의 HTML 페이지 안에서 모든 UI를 업데이트 한다.
- root DOM node는 리액트가 UI를 업데이트 할 영역을 명확히 하기 위해 사용한다.
- 리액트는 Virtual DOM(가상 DOM)을 사용하여 변경 사항을 감지하고, 필요한 부분만 이 root DOM Node에 업데이트 한다.
3. root DOM node의 브라우저 동작 과정
1. HTML 파일:
- 브라우저는 HTML 파일을 먼저 읽는다.
- 이때
<div id="root"></div>를 찾게 된다.
<div id="root"></div>- 이 div는 빈 상태로 시작하지만, 리액트가 여기에 내용을 채운다.
2. 리액트가 root DOM node에 렌더링:
- 리액트는 자바스크립트로 동작한다. index.js 파일에서 ReactDOM.createRoot()를 사용하여 리액트를 root DOM node에 연결한다.
const root = React.createRoot(document.getElementById('root'));
root.render(<h1>안녕하세요, 리액트입니다!</h1>);- 위 코드가 실행 되면, root DOM node(
<div id="root"></div>)안에 리액트의 내용이 렌더링 된다:
<div id="root">
<h1>안녕하세요, 리액트입니다!</h1>
</div>3. root DOM node를 통해 UI를 업데이트:
- 리액트는 Virtual DOM을 사용하여 변경 사항을 감지하고, root DOM node에 업데이트한다. 이렇게 하면 브라우저가 전체 페이지를 새로고침하지 않고 필요한 부분만 업데이트 할 수 있다.
4. 코드로 이해하기
HTML 구조:
HTML 파일은 보통 다음과 같이 작성 된다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html><div id="root">는 빈 상태로 시작하며, 리액트가 렌더링을 담당한다.
리액트 코드:
import React from "react";
import ReactDOM from "react-dom/client";
const element = <h1>안녕하세요, 리액트입니다!</h1>;
const root = React.createRoot(document.getElementById("root"));
root.render(element);- ReactDOM.createRoot(document.getElementById("root"));
- HTML에서 id가 root인<div>를 찾는다.
- 리액트가 이 div 안에 모든 콘텐츠를 렌더링하도록 설정한다. - root.render(element);
- 리액트가<h1>엘리먼트를 root DOM node 안에 렌더링 한다.
5. root DOM node의 역할
- 리액트의 시작점:
- 리액트가 브라우저 DOM과 연결되는 "입구" 역할을 한다.
- Virtual DOM과 실제 DOM의 연결 고리:
- 리액트는 Virtual DOM에서 변경 사항을 계산하고, root DOM node를 통해 실제 DOM에 반영한다.
- SPA 동작을 가능하게 함:
- root DOM node 안에서 모든 UI가 업데이트되므로, 전체 페이지 새로고침 없이 앱이 동작한다.
6. 이해하기 쉬운 비유
root DOM node를 집에 비유한다:
- HTML 파일은 집의 뼈대이다.
<div id="root">는 집 안의 큰 방하나 이다.- 리액트는 이 방(root DOM node) 안에서 모든 가구와 장식(콘텐츠)를 배치하고, 업데이트 하며 관리한다.
이 방이 없다면 리액트가 어디에 콘텐츠를 넣어야 할 지 알 수 없다.
따라서 root DOM node는 리액트 어플리케이션의 필수적인 출발점이라고 할 수 있다.
7. 정리
- root DOM node는 리액트가 HTML 문서와 연결되는 시작점이다.
- 리액트가 생성한 Virtual DOM은 root DOM node를 통해 브라우저 DOM에 반영된다.
- HTML에서
<div id="root">를 정의하고, 리액트가 이를 통해 UI를 관리하도록 설정한다.
신입 개발자 임니당 : > (2025.02.05~)