[React] 리액트의 작동 원리 (React-DOM 과 Virtual-DOM)

🔮 1. React-DOM

 React는 UI를 구축하기 위한 자바스크립트 라이브러리로, React의 핵심은 바로 컴포넌트이다. UI를 구축하기 위해서 바로 이 컴포넌트를 이용하기 때문이다. 컴포넌트를 통해 사용자 인터페이스를 구성하고, 업데이트 역시 컴포넌트를 통해서 한다. React는 컴포넌트와 상태 객체를 관리하고 업데이트가 일어나면 변경 전후의 상태를 확인한다. 그리고 React는 화면에 표시되어야할 모든 정보를 React-DOM 에게 전달하고, React-DOM이 DOM을 업데이트(렌더링 및 리렌더링) 한다.

//index.js
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 React 프로젝트의 index.js 파일에는 위와 같은 코드가 있다. 이 코드를 이해하면 React-DOM 이 DOM을 업데이트 한다는 말을 이해할 수 있다.

 

 

createRoot(container[, options]);

Create a React root for the supplied container and return the root. The root can be used to render a React element into the DOM with render
출처 : React 공식문서

 createRoot 메서드는, container 요소를 인자로 받아 root를 반환한다. 이 반환받은 root를 render 메서드와 함께 사용하면, React 요소를 DOM에 렌더링 할 수 있다고 공식문서에서는 말한다. 

const root = ReactDOM.createRoot(document.getElementById('root'));

 다시 index.js 를 보면, 매개변수 container에 id 가 root 인 요소가 인자로 들어가있다. 이는 index.html 파일의 body 안에 id가 root 인 div를 가리키는 것이다. 

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

 바로 이 div 를 통해 DOM 에 접근하는 것이다.

 

root.render(element);

Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).
출처 : React 공식 문서 

 render의 역할은 이름 그대로 렌더링이다. 렌더링 할 요소를 인자로 받아, 컴포넌트(root)에 렌더링한다.

root.render(<App />);

 

index.js 에 있는 이 코드는, root 요소에 App 컴포넌트를 렌더링하는 것이다. 즉, 우리가 작성한 컴포넌트 들은 render 메서드를 통해 id가 root인 div 안에 렌더링 된다. 

 

🧭 2. Virtual DOM (가상 돔)

 DOM 이 업데이트 될 때,  DOM 전체를 다시 렌더링하는 것은 아니다. 이것이 순수 자바스크립트로 DOM 을 조작할 때와 React(그리고 Vue)를 사용할 때의 차이점 중 하나이다. React에서는 Virtual DOM 개념을 사용하여 변화가 있는 부분만 브라우저에 알려 DOM 을 업데이트 한다. 

 

 Virtual DOM은 실제 DOM 의 copy 본으로 볼 수 있는데, DOM 의 구조를 자바스크립트 객체로 나타낸 것으로 메모리 상에서만 존재한다. 이 Virtual DOM 은 총 두 개로 하나는 업데이트 전 상태, 그리고 다른 하나는 업데이트 되어야 할 상태로 존재한다. 그래서 두 상태 차이를 인식하고 비교한 후(diffing) 바뀐 부분만 브라우저에 알려 실제 DOM에 적용한다(reconciliation).

 

//전
<div>
  <h1>제목</h1>
</div>

//후
<div>
  <h1>제목</h1>
  <p>내용</p>
</div>

위와 같이 <p> 태그만 추가되었다면, 브라우저에게 <div>, <h1>, <p>를 모두 전달하는 것이 아니라, <p> 의 변화를 알려 <p>만 DOM에 추가한다. 

 

why Virtual Dom?

 사실 DOM은 트리구조이기 때문에, 알고리즘을 사용하면 DOM 안의 정보를 조작하는 건 그다지 무거운 작업이 아니다. 그럼에도 React가 굳이 Virtual DOM 을 선택한 이유는, UI를 다시 그리는 시간이 오래 소모되기 때문이다. 즉, 리페인트는 비용이 많이 드는, 성능에 악영향을 주는 작업이다. DOM 에 변화가 생기면 레이아웃 계산과 페인팅이 다시 진행되는데, React는 변화된 부분을 DOM 에 한 번에 업데이트 시켜 그려준다(batch update). 그래서 사용자가 느끼기에 빠르고 사용경험이 좋은 웹페이지를 만들 수 있다. 

 

 

참고

리액트 공식 문서