Virtual DOM

목차

1. Virtual DOM 등장 배경
2. Virtual DOM?
3. 구현 방법

1. Virtual DOM 등장 배경

---

jQuery 등이 등장하며 JS로 DOM을 동적으로 조작해 더 많은 것들이 가능하게 되어 웹은 새로운 시대를 맞이하게 되었다. 하지만 Twitter와 Facebook 등 조금만 스크롤을 진행해도 몇천 개의 element가 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 퍼포먼스 저하를 일으켰고 특히나 모바일 브라우저에서 이러한 취약점이 더 대두되었다.

 

또한 당시 jQuery를 이용한 개발 방법이 MVC 등 데이터 모델들을 이용해 개발을 진행하기 썩 좋은 모습이 아니었던 것도 한몫했다. DOM은 데이터를 tree구조로 보여주기에 알맞을 순 있지만, 객체지향으로 사용하기 어려웠기 때문이다. 따라서 유지보수가 어려웠고 데이터를 직관적으로 UI와 연결시키기 또한 힘들었다. (느리다는 얘기가 없는 이유는 DOM이 느리다기 보단, DOM이 변경되었을 때 새로 UI를 그리는 작업이 느리다는 것을 구분하기 위해서이다.)

 

이러한 문제들을 해결하기 위해 Google의 Angular, Facebook의 React 등 Virtual DOM을 활용한 프레임워크들이 등장하기 시작했다.

2. Virtual DOM?

---

Virtual DOM은 말 그대로 DOM을 메모리에 추상화하여 저장한 것을 말한다. (그리고 보통은 여기 아래에서 설명하는 기능까지 합친 것들을 말한다.)

 

여기까지 만이라면 별로 특이한 점이 없겠지만, Virtual DOM에서 가장 중요한 점은 차이점을 비교하여 필요한 부분만 업데이트한다는 것에 있다. 사실 DOM 자체는 느리지 않다. 그냥 tree 자료구조에서 값을 하나 추가, 삭제할 뿐이다. 하지만 문제 그다음에 일어난다.

 

DOM을 변경하면 아래와 같은 일이 벌어진다.

출처: https://elmprogramming.com/virtual-dom.html

이 과정은 매우 복잡하고 오래 걸린다. 물론 각 브라우저 회사들에서 최대한 렌더링 시간을 줄여보려고 노력은 하고 있지만 수많은 엘리먼트를 뚝딱 그리기는 여전히 어려운 일이다.

 

따라서 최소한으로 변경하여 최소한으로 다시 그릴 수 있게끔 해주는 것이 바로 Virtual DOM인 것이다.

2. 구현 방법

---

Virtual DOM은 표준으로 지정된 것이 아니기 때문에 각 회사 및 개인별로 구현 방법이 다르지만 큰 틀은 위에 설명했던 것과 같다. 다시 한번 설명하자면 메모리에 DOM을 추상화하여 저장하고 실제 DOM과 비교하여 변경사항이 있다면 변경된 부분만 업데이트한다. 만약 변경사항이 없다면 업데이트하지 않는다.

 

React, Vue, Angular 등등 많은 오픈소스들이 이미 Virtual DOM을 사용 중이기 때문에 해당 프로젝트들을 분석해도 좋지만 추가적인 기능 때문에 (아무리 낮은 버전이라도) 분석에 어려움이 따를 수 있기 때문에 virtual-dom 저장소를 확인해보는 것을 추천한다.

 

아마 확인을 해봤다면 알 수 있겠지만, tag, attribute 등의 DOM element들이 갖는 내용들을 모두 추상화하여 객체들로 표현한다는 것을 알 수 있다. 

이 글을 작성할 때 읽은 감사한 자료들.

---

https://jbi.sh/what-is-virtual-dom/

What is virtual DOM?

https://elmprogramming.com/virtual-dom.html

Beginning Elm

https://github.com/Matt-Esch/virtual-dom

Matt-Esch/virtual-dom

https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/

The Real Benefits of the Virtual DOM in React.js - Accelebrate