Virtual DOM 가상돔이란?

DOM이란?

Document Object Model

여기서 Document는 HTML 문서이고, 결국 DOM은 HTML을 자바스크립트가 이해할 수 있는 Object로 만들어 주는 것이다.

DOM은 브라우저에 기본적으로 내장되어있는 API라고 한다.

웹브라우저가 공장이고 HTML은 공장에 보내는 주문서라고 비유할 수 있다.

예를들어 input태그는 HTML주문서에선 <input/>에 불과하지만 브라우저라는 공장으로 들어가면 

지정된 타입에따라 빈칸에 입력을 받고 그 값을 value로 내보낼 수 있는 기능을 갖춘 input object로 만들어진다.

이처럼, HTML의 각 요소들이 브라우저에서 실체로 제작되는 것!

즉, HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응, 값을 입력받는 등 긱능들을 수행할 객체들로 실체회된 형태(MDN공식 정의: 'HTML이나 XML문서를 실체로 나타내는 API')

DOM은 API를 갖고있기때문에 어떤 언어든 라이브러리만 갖춰져있으면 DOM조작이 가능하다.

 

 

Virtual DOM이란?

가상DOM은 돔의 구조만 간결히 흉내낸 자바스크립트 객체

브라우저는 html문서를 읽어 DOM트리, CSS트리를 만들어 클라이언트에게 보여주며 동작한다.

여기서 하나의 요소에서 수정이 필요할때, 만약 실제 DOM 객체에 접근하려고 한다면 트리 구조를 모두 순회해야 한다.

특히, SPA에서는 DOM을 수시로 변경해달라고 요청하므로 가상돔이 필수적인 것!

 

Virtual DOM 작동방식

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다. => Diff 알고리즘
   (Diffing은 현재것과 이전것 두개를 비교해 다른점을 찾아내는 것)
3. 바뀐 부분만 실제 DOM에 적용한다.

리액트에서의 Diffing, 빨간 부분이 업데이트된 부분

빨간 부분이 변화가 생긴 dom노드. 가상돔에서 비교하고 업데이트, 자식 노드들도 업데이트 한다. 이전 상태와 바뀐게 있는지 검사(diff)한 후 달라졌다면 리렌더한다. 가상돔에서 연산이 끝난 후 최종 변화만 실제 DOM에 던져준다.

Virtual DOM 사용했을때의 장점

정적인 UI의 DOM을 자바스크립트를 사용해 동적으로 변경하는데, 이 작업은 결국 브라우저에게 아주 큰 부담이다. 30번 수정된 웹페이지를 30번이나 다시 그려줘야한다니 당연히 많은 부하와 시간적 손해가 일어날 수 밖에없다. 이런 치명적인 단점을 가상돔이 도와주고있는 것이다. 이 과정은 가상돔없이도 가능하지만 가상돔을 사용해 DOM fragment를 관리하는 과정을 수동으로 하나하나 작업 할 필요 없이, 자동화하고 추상화가능하다. 또한, 이전값과 비교해 변화한 부분을 우리가 파악할 필요없이 가상돔이 자동으로 찾아준다. 

 

 

요약하자면,

가상DOM은 돔의 구조만 간결히 흉내낸 자바스크립트 객체이다. DOM 과 유사한 객체를 메모리에 올려놓고, 데이터에 업데이트가 있을때 가상DOM을 수정하고, 실제 DOM 에서는 변경 사항만 변경할 수 있게끔 해서 더 반응성이 빠른 웹을 구현할 수 있다. 정적인 UI의 DOM을 자바스크립트를 사용해 동적으로 변경하는데, 이 작업은 결국 브라우저에게 아주 큰 부담이다. 30번 수정된 웹페이지를 30번이나 다시 그려줘야한다니 당연히 많은 부하와 시간적 손해가 일어날 수 밖에없다. 이런 치명적인 단점을 가상돔이 도와주고있는 것이다. 

 

꼬리질문으로 브라우저 동작 원리를 받을 수도있다고 하니 브라우저의 동작원리를 정리해볼 예정이다.

 

예시출처: [유튜버 '얄팍한 코딩사전'님 DOM, virtual DOM 강의]

참고자료: [개발자 아저씨들 힘을모아]