Virtual DOM 은 뭘까?

이번 글은 Virtual DOM 에 대해서 기록해보려고 한다.

 

React 나 Vue.js 에서도 쓰이고 있는 Virtual DOM 이라는 단어자체는 많이 들어봤는데 

어렴풋이 기억에만 있는 개념을 정리해보고자 한다.

 

먼저 이것을 알기에 앞서 DOM 이 뭔지부터 되짚어 볼 필요가 있다.

 

구글에 DOM 을 검색 했을때 가장 먼저 나오는게 뭔지 보자.

 

"DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다"

출처 : developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

DOM 소개 - Web API | MDN

라고 한다.

 

쉽게 말하면 웹 페이지에 대한 인터페이스 역할을 한다고 보면 된다.

 

그럼 본론으로 돌아와 왜 React 는 Virtual DOM 을 쓸까?

 

한마디로 말하면 비효율적이라서다.

 

기존의 DOM 조작은 자바스크립트나 Jquery 를 통해 dom 에서 원하는 요소를 찾고 변경했었는데.

해당 요소를 getElementById 로 찾아낸다면 수많은 요소중 하나를 찾기에는 너무 많은 리소스가 든다.

 

그리고 그것은 속도, 성능에 대한 오버헤드를 발생시킨다.

 

그래서 탄생한 것이 Virtual DOM

 

화면에 변화가 생기면 실제 DOM 에 적용되기전 가상의 DOm 에 먼저 적용시키고 실제 DOM으로

전달하는데 이렇게 하게 되면 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교하고

변화된 내용만 교체하면 되기 때문에 브라우저내에서 발생하는 연산의 양을 줄이면서 성능이 개선된다.

 

또한 메모리에 존재하기 때문에 훨씬 빠르고 실제로 렌딩되지도 않는다.

 

 

 

* 추가

velog.io/@sbinha/React%EC%97%90%EC%84%9C-Virtual-DOM

Virtual DOM

더 자세히 알고리즘적인 부분까지 설명한 글이 있어서 첨부한다.