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",
},
],
};
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 객체 구성 형태와 비슷합니다.