[React] (리액트 공부하기 1) ReactDOM과 root DOM node

1. DOM이란?

• DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 모델이다.
• HTML 요소들은 DOM 트리 구조로 표현된다.
  ex) <div>나<h1> 같은 태그들이 DOM의 노드(node)로 나타난다.
  

---

2. root DOM node란?

• root DOM node는 리액트가 렌더링될 시작점이 되는 HTML 요소이다.
• 일반적으로 index.html 파일 안에 있는 <div>태그로 정의 된다.

예를 들어:

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

여기서 <div id="root">가 root DOM node이다.
리액트는 이 "root"요소에 컴포넌트를 렌더링한다. 리액트는 root DOM node 내부에서 동작하며, 페이지의 나머지 부분은 그대로 유지된다.

---

3. ReactDOM이란?

• ReactDOM은 리액트에서 만든 컴포넌트를 HTML DOM에 렌더링하는 역할을 하는 라이브러리이다.
• ReactDOM은 컴포넌트를 DOM에 연결하고, 변경 사항을 DOM에 업데이트한다.

---

4. 코드에서 ReactDOM과 root DOM node의 역할

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="world" />);

동작을 설명하면:

1. document.getElementById('root');

• HTML의 <div id="root"><div>를 찾는다. 이것이 root DOM node이다.

2. ReactDOM.createRoot(...);

• root DOM node를 ReactDOM과 연결한다.
• 즉, 리액트가 DOM 요소를 조작할 수 있도록 연결 지점을 만든다.

3. root.render(...);

• 리액트 컴포넌트인 를 root DOM node 안에 렌더링한다.

결과:

HTML DOM의 <div id="root"></div>가 다음처럼 변경된다.

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

---

5. ReactDOM과 root DOM의 관계 요약

• ReactDOM은 리액트 컴포넌트를 root DOM node에 렌더링한다.
• root DOM node는 리액트 애플리케이션이 렌더링이 되는 HTML의 시작점이다.