[React 주요 개념] 02. 엘리먼트 렌더링, Virtual DOM

엘리먼트 렌더링 – React (reactjs.org)

엘리먼트는 React 앱의 가장 작은 단위다.

const element = <h1>Hello, world</h1>;

위와 같이 엘리먼트는 화면에 표시할 내용을 기술한다.

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(Plain Object)이며, 쉽게 생성할 수 있다.

React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.

DOM에 엘리먼트 렌더링하기

Index.html 파일 내부에 다음의 div요소가 있다고 가정하자.

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

React DOM은 별도의 JS, JSX 파일에 정의한 '리액트 컴포넌트'를 위와 같은 HTMLElement에 연결한다.

이것을 루트(root) DOM 노드라고 부른다.

 

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있으나,

기존 앱에 React를 통합하려는 경우, 많은 수의 독립적 루트 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);

주의
실제로 대부분의 React 앱은 ReactDOM.render()를 한번만 호출한다.

변경된 부분만 업데이트 하기(Virtual DOM)

전체를 다시 렌더링 하는 명령을 내리면 자원이 비효율적으로 사용된다.

만약 실제 DOM을 직접 조작해야 하는 경우에는 변경되는 부분을 일일이 확인하여 수작업으로 조정해주어야 한다.

 

하지만 React에서는 Virtual DOM을 사용하여 자동으로 해결해준다.

React DOM은 가상의 DOM 트리를 이용하여, 이전 상태와 이후 상태를 비교하고 필요한 부분만 DOM을 업데이트한다.

위의 예제를 살펴보면 매초 전체 UI를 다시 그리도록 엘리먼트를 설계했지만

실제 구현된 결과는 내용이 변경되는 텍스트 노드만을 업데이트 하는 모습을 볼 수 있다.