1.Dom이란?

먼저 virtual dom을 설명하기 전에 dom에 대해서 알아보자. DOM Document Object Model의 약자이며, 한글로는 "문서 객체 모델"이라고 부른다. DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다.
우선 브라우저가 랜더링되기까지의 과정을 아래 이미지를 통해 확인하겠다.

dom은 위에 그림처럼 웹페이지에 하나라도 변경사항이 있더라도 저 일련의 과정들을 처음부터 끝까지 다시 진행해야 한다. 그러나 그러나 virtual dom은 이러한 비효율적인 부분을 개선하기 위해서 사용하게 되었다.

2.Virtual Dom은?

그렇다면 virtual dom에 대해서 알아보도록 하면, Virtual Dom은 수정사항이 여러 가지 있더라도, virtual dom 은 한 번만 렌더링을 일으킨다. 아래 그림처럼, virtual dom은 dom이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한 번에 전달하여 딱 한 번만 렌더링을 진행한다.

3. Virtual Dom의 사용이유

그렇다면 virtual dom의 사용이유는 무엇일까? 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 dom 조작이 많이 발생한다. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다. 하지만 Virtual DOM은 웹브라우저 화면에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해줍니다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것이다. 이러한 기능들을 해소하고자 Virtual Dom을 사용하고 있다.