Virtual DOM이란?
Virtual DOM은 DOM 노드트리를 복제한 자바스크립트 객체입니다.
class, style 등의 속성은 가지고있지만, DOM api 속성은 가지고 있지 않습니다.
등장배경: DOM을 직접 조작할 때의 비효율성
Web이 발전하면서 복잡도는 계속해서 증가하고, DOM 조작도 빈번하게 일어나게 됩니다.
DOM을 직접 조작하는 것은 Virtual DOM을 이용하는 것에 비해 비효율적이라고 합니다.
- DOM을 조작하여 발생하는 리플로우, 리페인트 작업에서 발생하는 브라우저의 연산이 많아지기 때문에 비효율적입니다.
*예를 들어, 30개의 노드를 수정하면 30번의 리렌더링을 하게 됩니다. - 특히 리플로우는 전체 픽셀을 다시 계산하는 과정이기 때문에, 리페인트보다 더 많은 부하가 발생합니다.
*리플로우, 리페인트를 모른다면 렌더링 엔진에서 '렌더링 엔진의 동작 과정'과 'UI가 업데이트 되는 상황'에 대해 읽어 봐 주세요.
Virtual DOM의 동작: 리플로우, 리페인트 작업을 최소화합니다.
JavaScript 같은 프로그래밍 언어로 인해 뷰(view)에 변화가 생겼을 때 마다 새로운 Virtual DOM을 만듭니다.
*변경사항이 30개 있더라도, Virtual DOM의 생성은 메모리 상에서 작동하므로 리렌더링에 비해 적은 비용이 듭니다.
그리고 변경사항이 모두 반영되면 한번만 실제 DOM에 반영(버퍼의 역할을 하는 것)됩니다.
이 때 DOM의 변화 규모는 크지만, 리플로우, 리페인트 횟수를 줄여 성능상 이득을 얻을 수 있습니다.
Virtual DOM은 빠른가요?
Virtual DOM을 사용하는 이유를 물으면, '직접 DOM을 조작하는 것 보다 빨라서' 라고 대답하는 경우도 있습니다.
하지만, 대부분의 상황에서 Virtual DOM은 빠르지 않습니다.
Virtual DOM 에서 데이터를 조작하고, DOM을 또한번 조작하는 과정이기 때문입니다.
DOM을 직접 조작하는 과정에 비해 복잡합니다.
다만, 앞서 말했듯 DOM 조작이 빈번하게 일어나는 경우 리렌더링에서의 효율을 얻을 수 있기 때문에 차용되는 것입니다.
[참고자료]