[Vue.js] Virtual DOM (가상 돔) 개념과 동작방식

Vuejs / Virtual Dom / 가상돔 / Vuejs DOM 방식 / 가상돔 개념 / 가상돔 필요성 / 가상돔 동작방식 / 렌더링 최소화

 

Virtual DOM의 필요성

일반적인 DOM에서 변경 발생시에 Render Tree 생성 > Layout 계산 > Painting 과정이 이루어져 브라우저에 보여진다.
이 일련의 과정들이 DOM을 제어할때마다 일어난다면, 클라이언트에게 부담이 될것이고, 속도 저하가 일어날 것이다.

예를 들어, 10개의 DOM을 순차적으로 변경할 경우, 총 10번의 렌더링을 해야만 한다.

 

Virtual DOM 동작 방식

모든 DOM 제어가 끝난 이후 최종적으로 한번의 렌더링을 수행하도록 하여 속도 저하를 예방할 수 있다.

1. 진짜 DOM 트리를 기반으로, Virtual DOM 트리를 생성한다.
2. 생성된 Virtual DOM 트리에 변경된 값을 모두 적용한다.
3. 모든 DOM 제어가 끝났을때, Virtual DOM 트리를 진짜 DOM 트리에 적용한다.
4. 렌더링을 시작한다.

 

[Vue.js] 데이터 바인딩 : 단방향 & 양방향 개념과 사용방법