Virtual DOM이란? (+작동원리)

1. Virtual DOM이란? 
-> DOM이란 (Document Object Model)의 약자로 웹 페이지를 이루는 태그들을 
자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미하며 기존에는 화면의 변경사항을 돔을 직접 조작하여 반영하였다. 

하지만 돔트리가 수정될때마다 렌더 트리가 실시간으로 갱신되기에 수정 횟수만큼 새롭게 렌더링 된다는것이 큰단점으로 이 단점을 보완하고자 가상돔을 활용한다 가상돔을 이용한 리액트나 뷰 같은 프레임워크는 실시간으로 수정하지않고 변경사항이 모두 반양된 가상 돔을 만들어 내기 떄문에 이러한 불필요한 렌더링 횟수를 줄일 수 있다.  

2. Virtual DOM 작동 원리
-> 데이터가 업데이트 되면 전체 UI를 가상 돔에 리렌더링하고 이전 가상돔에 있던 내용과 현재 내용을 비교합니다. 
이렇게 가상돔끼리 비교를 하여 바뀐부분만 실제 돔에 적용이 되어 업데이트가 될때 레이아웃계산이 한번만 이루어지게 되는것입니다. 



(자료)
DOM이란 (Document Object Model)의 약자로 웹 페이지를 이루는 태그들을 
자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.
브라우저마다 DOM을 구현하는 방식은 다르기에 DOM이라는 것이 구체적으로 정해저 있는 언어나 모델과 같은 것은 아니다. 다만 웹페이지를 객체로 표현한 모델을 의미할 뿐이다.

문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.
가상 돔(Virtual DOM) 이란?

그렇다면 가상 돔(Vitual DOM)은 무엇이고 왜 사용하는가?

기존에는 화면의 변경사항을 돔을 직접 조작하여 브라우저에 반영하으나 큰 단점은 돔 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이었다.
 즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 되는 것이다.

가상 돔을 활용하면 이러한 불필요한 렌더링 횟수를 줄일 수 있다. 가상 돔을 활용한 대표적인 프런트 앤드 프레임워크가 리액트, 뷰, 앵귤러이다. 이러한 프레임워크들은 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고 변경사항이 모두 반영된 가상 돔을 만들어낸다. 그 후 가상 돔을 이용해 한 번만 돔수정을 하게 되고 이는 한 번만 렌더 트리를 만들어내게 된다. 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로써 불필요한 렌더링 횟수를 줄일 수 있게 되는 것이다.

자료 링크 : https://jeong-pro.tistory.com/210

https://dev-cini.tistory.com/11

Virtual DOM 동작 원리와 이해 (with 브라우저의 렌더링 과정)