Virtual Dom이란?

Virtual DOM 은 말 그대로 가상 DOM이다. DOM의 가상 버전이라는 얘기다. 그렇기에, Virtual DOM 정리 전에 먼저 기존 DOM에 대해 이해해볼 필요가 있다.

DOM

DOM이란 문서 객체 모델(Document Object Model)의 약자로 XML, HTML문서에 접근하기 위한 일종의 인터페이스다.
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서구조, 스타일, 내용등을 변경할 수 있도록 도와준다.

좀더 알기 쉽게 얘기한다면,
DOM은 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리구조로 표현한 객체(Object)다.
DOM은 웹 페이지의 객체 지향 표현이고, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있는 것이다.
기본적으로 자바스크립트에서는 DOM조작을 가능하게 해주는 API를 제공한다.

DOM과 VirtualDom, React와의 관계

HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차다. HTML문서를 이루는 엘리먼트는 브라우저가 HTML문서를 읽르면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시한다.

React는 이러한 DOM 엘리먼트를 직접 조작하지 않고, Virtaul DOM을 다뤄 React가 가상 DOM을 생성하고 브라우저가 이를 렌더링하도록 하는 방식을 따른다. 이러한 Virtaul DOM을 React Element라고 한다. React Element는 개념상 HTML Element와 비슷하지만 실제로는 Javascript 객체다. 따라서 HTML의 DOM API를 직접 다루는 것보다는 Javascript 객체인 React Element를 직접 다루는 편이 훨씬 빠르다.

서두에 Virtaul DOM은 가상 DOM이라고 했는데 이 말은 실제 DOM이 아니기 때문에 변경이 있어도 실제 DOM에는 영향이 없다는 것이다. 즉 리렌더링 X

실제 데이터가 변경되어서 리렌더링 되어야할 상황에 React는 기존 DOM이 아닌 Virtual Dom에 알림.
Virtual DOM은 기존의 DOM과 자신을 비교하여 변경된 부분만 DOM에게 전달해주는것이다.