[React] 엘리먼트 렌더링

엘리먼트란?

React 앱의 가장 작은 단위, 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다.

---

DOM에 엘리먼트 렌더링하기

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 부릅니다.

 

React 요소를 렌더링하려면 먼저 DOM 요소를 ReactDOM.createRoot()에 전달한 다음 React 요소를 root.render()에 전달합니다.

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

---

변경된 부분만 업데이트하기

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하여 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

 

 

출처: https://ko.reactjs.org/docs/rendering-elements.html