Virtual Dom (가상 Dom)
virtual dom (가상dom) 이란 DOM 을 가볍게 만든 JavaScript 표현이라고 할 수 있다. 주로 React, Vue.js , Elm 에 사용 된다. 가상 Dom 은 실제로 screen 에 랜더링하는 것이 아니기 때문에 DOM 을 직접 업데이트 하는 것 보다 상대적으로 빠르다.
랜더링시마다 새로운 가상 DOM 을 생성하여, 상태값 변경 이전/이후 달라진 부분만을 비교하는 매커니즘을 사용한다.
Browser Workflow
이해를 돕기 위해 browser가 어떻게 작동하는지 알고 있어야 한다.
Dom (Document objuect Model) Tree 생성
* HTML Document를 Parser 로 파싱 후 Dom Tree 를 생성 한다.
Style Rule 생성
*CSS Parser는 CSS를 분석하여 Style Rule을 생성한다.
DOM Tree 와 Style Rule 로 Render Tree 를 생성
*Webkit 에서는 노드의 스타일을 처리하는 과정을 "attachment" 라고 부른다. DOM 트리의 모든 노드들은 'attach' 라는 메소드가 있다, 메소드는 스타일 정보를 계산해서 객체형태로 반환한다.
이 과정은 synchronous 작이고 DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다.
랜더 트리를 만드는 과정에선, 각 요소들의 스타일이 계산이 되고 또 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조한다.
Layout
*랜더트리 가 다 만들어지고 나면, 레이아웃 과정을 거친다. 각 노드들은 스크린의 좌표가 주어지고, 정확이 어디에 나타나야 할 지 각 위치들이 주어진다.
Painting
*랜더링 된 요소들에 색을 입히는 과정이다. 트리의 각 노드들을 거쳐가면서 paint()메소드를 호출 하고 스크린에 원하는 정보가 나타난다
Dom (돔)
DOM(Document object Model) 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 객체 모델을 의미한다. 
Virtual Dom 이 생긴 이유
복잡한 SPA (single page application) 에서는 DOM 조작이 많이 발생한다. 변화를 적용하기 위해 브라우저가 많이 연산을 해야하고 전체적인 프로세스를 비효율적으로 만든다.
여기서 Virtual Dom 은 view 변화가 있다면, 그 변화는 실제 DOM 에 적용되기 전에 가상의 DOM에 먼저 적용시키고 그 최족정인 결과를 실제 DOM 으로 전달해 줌으로써 브라우저 내에서 발생하는 연산의 양을 줄이며 성능이 개선 된다.
- 데이터가 업데이트 되었을때 , 전체 UI 가 Virtual Dom 에서 리랜더링 된다.
변경 전 DOM 과 새로운 Virtual Dom 의 차이를 계산후
DOM 은 변경된 부분만을 변화 시킨다.
결론
Virtual Dom 
새로운 element 가 업데이트 된 경우 새로운 가상 DOM 을 생서하고 이전 DOM 과 비교 한 후 변경된 부분만을 업데이트 하기에 비교적 빠르고 메모리 낭비가 덜하다.
