Virtual DOM이란 무엇인가? :: 마이구미

이번 글은 Virtual DOM에 대해 다뤄본다.

Virtual DOM은 React를 통해 이미 많이 알려져있다.

최근 핫한 Vue.js 2.0에서부터도 사용되고 있다.

Virtual DOM 무엇인지? 왜 나왔는지? 왜 쓰는지? 에 대해서는 다를 게 없기 때문이다.

Virtual DOM 기술은 DOM 조작에 있어 비효율적인 이유에서 나오게 되었다.

DOM 조작에 있어, 비효율적인 이유를 살펴보자.

기존에는 아래와 같이, Javascript 또는 Jquery를 통해 원하는 dom 노드를 찾은 후 변경하는 행위를 했다.

document.getElementById('myId').appendChild(myNewNode) // javascript
$('#myId').append(myNewNode) // jquery

하지만 수천가지의 노드가 존재할 수 있기에, 계산하기 위해 큰 비용을 투자하게 된다.

그 결과, 성능 저하로 인한 페이지 속도 지연이 발생한다.

위와 같은 처리에 대한 비용이 큰 자세한 이유는 링크를 참고하길 바란다. http://d2.naver.com/helloworld/59361

간단히 설명하자면, 아래의 그림과 같은 동작이 DOM 조작을 할 때마다 영향을 끼치게 되는 것이다.

이러한 배경 속에서 Virtual DOM 이 탄생하게 되었다.

이러한 Virtual DOM에 대해 코드를 통해 표현할 수 있다.

<ul id='myId'>
  <li>Item 1</li>
  <li>Item 2</li>
<ul>

위와 같은 HTML 코드가 있는 상태에서 id가 'myId' ul 태그 안에 li 태그 하나를 추가할 것이다.

이 작업을 위해 우리는 기존 방법으로는 javascript, jquery를 통해 노드를 찾은 후 필요한 노드를 삽입했다.

let domNode = {
  tag: 'ul'
  attributes: { id: 'myId' }
  children: [
    // where the LI's would go
  ]
};

domNode 객체를 Virtual DOM으로 보면 된다.

직접 DOM API를 사용하지 않고, domNode 객체를 활용하게 된다.

이러한 처리는 실제 DOM이 아닌 메모리에 있기 때문에 훨씬 더 빠르다.

domNode.children.push('<li>Item 3</li>');

즉, 실제 DOM이 아닌 Virtual DOM에 먼저 변경 작업을 해준다.

그리고 변경된 부분만 찾아 실제 DOM에 변경해주는 방식이다.

이로써, 기존 View 방식보다 많은 양의 연산을 줄일 수 있게 된다.

Virtual DOM의 여부에 따른 차이를 보여주는 애니메이션 영상이다. 

참고하면 도움이 될 것이다.

https://www.youtube.com/watch?v=BYbgopx44vo

참고 자료

https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40