virtual dom이란?

1. virtual DOM이란?
   DOM을 추상화한 가상의 객체입니다. 가상 DOM은 React, Vue.js그리고 elm에 사용됩니다. 현대의 복잡하고 규모가 큰 웹 애플리케이션에서는 상호작용이 많은 만큼 DOM 조작이 많이 발생합니다. 이때 DOM을 조작할 때마다 작업을 수행하게 되면 수백, 수천 개의 요소를 새로 그려야 하기 때문에 성능이 저하되고, 전체적인 프로세스를 비효율적으로 만듭니다. 이런 문제를 해결하기 위해서 리액트는 이전 UI 상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

가상 DOM은 실제로 스크린에 랜더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠릅니다.

1-1. DOM(Document Object Model)
DOM은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다들 HTML문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것입니다. Document에 있는 각 UI에 대한 노드가 포함됩니다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용합니다.

1-2 virtual DOM 쓰는 이유
어떠한 태그의 속성이나 값을 변경하려고 할때 DOM에 접근하는 자바스크립트 메서드를 사용하여 변경합니다. 태그의 색상을 변경한다고 가정했을 때 우리는 document.getElementById()로 먼저 접근합니다

이렇게 되면 두가지 측면에서 아쉬운 점이 있습니다. 메모리의 누수와 속도, 코드량.

고민 속에서 탄생한게 virtual DOM입니다.

그리고 추가로 virtual DOM의 작동 방식은 변화가 일어나면 virtual DOM을 생성하고 변화 전의 virtual DOM과 변화 후의 virtual DOM을 비교하여 바뀐 요소들만 DOM에 적용합니다.