리액트 엘리먼트 렌더링이란?

🙄 엘리먼트는 뭔데요

리액트 공식 문서에 따르면 엘리먼트는 리액트 앱의 가장 작은 단위를 뜻합니다.
리액트를 공부하다보면 컴포넌트라는 개념을 만나게되는데

엘리먼트는 컴포넌트의 "구성요소"라고 알고 있으면 되겠네요!
엘리먼트가 모여서 컴포넌트가 되는 이미지입니다.

브라우저의 DOM 엘리먼트와 달리 Reach 엘리먼트는 일반 객체이고
쉽게 생성할 수 있으며 리액트 DOM은 리액트 엘리먼트와 일치하도록
DOM을 업데이트 해준다고 합니다.

또한 리액트 엘리먼트는 불변객체입니다. 따라서 엘리먼트를 생성한 이후에는 수정이 불가능해요
그럼 어케 수정함?
새로운 엘리먼트를 생성하고 이걸 root.render()에 전달하는 걸로 업데이트합니다.

---

🙄root DOM 노드

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

 

리액트로 구현된 애플리케이션은 하나의 root DOM 노드가 있습니다.
리액트 엘리먼트를 렌더링하기 위해서는
DOM엘리먼트를 ReactDOM.createRoot()에 전달한 다음
root.render()에 전달해야해요

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);​

DOM에서 id가 root인 엘리먼트를 취득해서 ReactDOM.createRoot()에 전달해주네요

그 다음에 element 를 root.render()에 전달하면 element가 화면에 나타나는거군요

---