리액트 동작 원리 - 가상 DOM

본 글은 <Do it! 리액트 모던 웹 개발 with 타입스크립트>를 참고해 공부한 내용을 정리한 글입니다.

 

react와 react-dom 패키지

react 

react는 공통으로 사용하는 기능을 제공하는 패키지이다.

컴포넌트, JSX, 리액트 훅 등 렌더러에 무관한 기능이 포함된다.

react-dom

react-dom 패키지는 앱이 동작하는 환경에 특화된 기능을 제공하는 패키지이다.

react-dom/client, react-dom/server, react-native 등이 있다.

 

문서 객체 모델

브라우저는 HTML 형식의 문자열을 분석해 특정한 자바스크립트 객체 조합으로 바꾼다.

이 객체는 자신의 특징에 맞는 인터페이스를 구현하는데, 이를 총칭해 문서 객체 모델(Document Object Model, DOM)이라 한다. 

 

document.createElement

DOM의 다양한 인터페이스를 객체로 생성할 수 있는 메서드.

사용법은 다음과 같다.

let element = document.createElement(tagName)[, options]);

let newDIv = document.createElement("div")	//div 요소를 자바스크립트로 생성

 

물리 DOM

리액트와는 관계없는 일반적인 자바스크립트 DOM 객체인데, 가상 DOM 객체와 구분하기 위한 물리 DOM 객체라 할 수 있다.

let pPhysicalDOM = document.createElement('p')
pPhysicalDOM.innerText = 'Hello physical DOM world!'
document.body.appendChild(pPhysicalDOM)

 

가상 DOM

 

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
const pVirtualDOM = React.createElement('p', null, 'Hello virtual DOM world!')

리액트에서도 createElement 함수를 제공한다. 

getElementById는 생성된 특정 물리 DOM 객체를 찾아주는 역할을 한다.

 

위 코드를 살펴보자. 

ReactDOM.createRoot 메소드로 root 변수에 getElementById('root')로 선택한 요소를 루트로 하는 리액트 루트를 생성한다.

React.createElement 메소드를 이용해 pVirtualDOM 변수에 'Hello virtual DOM world!'라는 텍스트를 가진 p 태그 리액트 요소를 생성한다.   

 

React.createElement 함수로 HTML 요소를 가상 DOM 트리 구조로 구현하는 것이다.

 

그리고 이렇게 가상 DOM 트리에 추가된 내용은 아직 브라우저에 표시되지 않는다.

이를 화면에 보이게 하려면 '렌더링(rendering)'이 필요하다. 

root.render(pVirtualDOM)

render 메서드가 호출되는 순간 가상 DOM 트리가 물리 DOM 트리로 변환된다.

 

가상 DOM을 사용하는 이유

그냥 물리 DOM으로 생성하면 더 편한 일 아닌가? 왜 굳이 이해하기도 어려운, 복잡한 방법으로 가상 DOM을 생성해서 물리 DOM으로 변환하는 것일까?

 

물리 DOM의 경우 "물리 DOM 트리에 있는 특정 HTML 요소의 속성값을 바꾸는 경우, 이를 탐지하여 반영할 수 있는가?" 라는 문제가 생긴다. 항상 id 속성을 명시해야 하는데, 그러면 구조가 복잡해질 뿐더러 중복되지 않게 아이디값을 만들기도 어렵다.

 

가상 DOM은 트리가 수정될 때마다 렌더 트리를 실시간으로 갱신하는 것이 아니라, '가상'의 공간에서 데이터를 미리 처리한 후 변경 부분을 변화시킨다.  첫 렌더링 과정만 생각하면 불편하지만, 변화가 생겨 다시 렌더링하는 상황을 생각하면 가상 DOM이 필요했던 것이다.