[React 공식문서] 3. 엘리먼트 렌더링

엘리먼트

엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술합니다.

React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다.

React 엘리먼트는 컴포넌트와는 다른 개념이며, 엘리먼트는 컴포넌트의 구성요소입니다.

 

DOM에 엘리먼트 렌더링하기

리액트로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다.

(기존 앱에 통합하려는 경우 많은 수의 독립된 루트 DOM 노드가 있을 수도 있긴 합니다.)

 

React 앨리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()에 엘리먼트를 전달합니다.

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

 

렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변객체입니다.

엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.

 

그러므로, UI를 업데이트 하기 위해서는

새로운 엘리먼트를 생성해 이를 ReactDOM.render()에 전달하는 방법 뿐입니다.

 

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

 

UI를 업데이트 하기 위해서

setInterval 콜백을 이용해 초마다 ReactDOM.render()를 호출하여 element를 생성합니다.

 

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

React DOM은 해당 엘리먼트(자식 엘리먼트 포함)를 그 이전 엘리먼트와 비교하여

필요한 경우에만 DOM을 업데이트 합니다.

 

리액트는 메모리상에 Virtual DOM 이라는 것을 두고 있고 우리가 보고있는 것은 Real DOM입니다.
그래서 Virtual DOM을 변경했을 때 리액트는 Real DOM과 Virtual DOM을 비교하여
바뀐 부분이 있다면 그 부분을 수정해 Real DOM을 바꾸어줍니다.

 

즉,  전체 UI를 다시 그리도록 엘리먼트를 만들었지만

ReactDOM은 내용이 변경된 부분만 업데이트 합니다.

 

---

❗ 요약 정리 ❗

1️⃣ 엘리먼트는 화면에 표시할 내용을 그린 가장 작은 단위(객체)

 

2️⃣ ReactDOM은 Virtual DOM을 이용하여 전체 엘리먼트를 업데이트하지 않고 변경된 부분만 업데이트

---

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

엘리먼트 렌더링 – React