Virtual Dom, 가상돔 ?

React, Vue를 하면서 내내 생각할 수 밖에 없는 가상돔.

 

우선 돔이 뭔지 알아보자.

 

DOM (Document Object Model)

웹 페이지, 웹 앱에 HTML 이란 Document에 작성 된 요소들을 구조적으로 표현한 것이다. (div, input, span, a 등)

트리데이터 구조이고 각 UI요소에 대한 노드가 포함된다. 웹 프론트개발자가 Dom을 JavaScript를 통해 콘텐츠를 

수정할 수 있기 때문에 매우 유용하다. 구조화 되어있고 특정 대상을 선택할 수 있어 유용하다. 

 

DOM 단점

노드의 수가 많아질수록 속도가 느려지고 DOM이 업데이트 될 때 오류가 발생된다. 

getElementById()나 getElementByClass()메서드를 사용하여 DOM의 내용을 수정하는 과정 또한

매우 번거롭다. 이게 노드를 수정하거나 업데이트 할 때 CSS까지 다시 매치하고 계산하기 때문에 성능에 영향을 미친다.

브라우저가 HTML 구문을 분석하고 지정한 ID나 Class를 가진 노드를 찾음 -> 특정 요소의 자식 요소 제거 -> updated value 로 요소(dom)을 업데이트 -> 부모, 자식 노드에 대한 CSS를 다시 연산 -> 브라우저 디스플레이에 페인팅

 

즉 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신됨.

수정사항 발생 개수만큼 렌더 트리가 수정되면서 새롭게 만들어짐.

그렇다고 느리다는 말은 아니다. DOM 자체는 빠르지만 웹 브라우저가 DOM에 연결된 CSS를 다시 연산하고

레이아웃을 구성하고 페이지를 리 페인트 하는 과정에서 시간이 길어질 뿐이다.

 

Virtual DOM (가상 DOM)

DOM을 가볍게 만든 것. 실제로 스크린에 렌더링 하는 것이 아니라 실제 DOM을 업데이트 하는 것보다 상대적으로 빠르다.

실제 DOM에 접근하여 조작하지 않고 그를 추상화 한 자바스크립트 객체를 구성하여 사용한다. 

DOM의 상태를 메모리에 저장하고 변경 전과 후를 비교하여 최소한의 내용만 반영하기 때문에 성능 향상을 이끌어낸다.

DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 경우 해당 변경 사항만 반영하기 때문에

React나 Vue처럼 대규모 SPA에 유용하게 쓰일 수 있다.