Virtual DOM 이란?

Virtual DOM은 HTML 객체에 기반한 자바스크립트 객체로 표현할 수 있습니다.

아래에 다음과 같은 HTML 코드가 있을 때, 사실 자바스크립트 객체로 표현된다는 것입니다.

Virtual DOM은 이렇게 자바스크립트 객체를 활용하고 있습니다. 그리고 이러한 처리는 실제 DOM이 아닌 메모리 상에서 동작하기 때문에 훨씬 더 빠르게 동작합니다. 그리고 Virtual DOM tree 는 실제 렌더링이 되지 않기 때문에 연산 비용이 적습니다.

예를 들어, 요소가 30개가 바뀌었다고 레아아웃을 30개씩 새로 하는 것이 아니라, 모든 변화를 하나로 묶어서 딱 한 번만 실행시킵니다.

이렇게 연산 횟수를 줄일 수 있기 때문에 실제 DOM 리렌더링에 비해서 효율적입니다.

사실 Virtual DOM이 하는 건 DOM Fragment의 변화를 묶어서 적용한 다음 기존 DOM에 던져주는 과정이라 할 수 있습니다. Virtual DOM은 이 과정을 자동화, 추상화 해놓은 것에 불과합니다.

// HTML
<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
</ul>

// Virtual DOM
let domNode = {
	tagName: "ul",
	attributes: { id: "items" },
	children: [
		{ tagName: "li",
			textContext: "item 1",
		},
		{ tagName: "li",
			textContext: "item 2",
		},
	],
};

JSX 와 React element

React는 JSX 라는 문법과 함께 사용되는 경우가 많은데요, 각 컴포넌트에서 리턴되는 React element를 JSX 문법으로 작성하는 것입니다. JSX 는 마치 그냥 HTML 태그들처럼 생겼지만 JSX는 자바스크립트의 확장 문법입니다.

function AComponent() {
	// JSX
	return (
		<div className="App">
			<h1>Hello!</h1>
		</div>
	)
}

이렇게 간단한 JSX를 컴포넌트에서 리턴 시키면 바벨은 JSX를 React.createElement() 호출로 컴파일합니다.

실제 바벨에서 변환을 시켜보면 이 JSX는 아래처럼 React element 객체를 리턴하는 것을 보실 수 있습니다.

function AComponent() {
	// React element
	return React.createElement("div", {
		className: "App"
	}, React.createElement("h1", null, "Hello!"));
}

그리고 React.createElement() 로 생성된 React element는 내부적으로 다음과 같은 객체로 표현될 수 있습니다. 앞에서 본 Virtual DOM 객체 구성 형태와 비슷합니다.