가상 돔(Virtual DOM)이란 무엇인가요?

DOM이 업데이트될 때마다 render 트리를 재 생성하고 reflow와 repaint 과정을 거치게 됩니다.
기존의 웹은 DOM을 자주 변경하지 않고 정적인 페이지로 구성했지만, SPA (React, Vue, Angular)가 등장하면서 DOM을 업데이트할 일이 잦아졌는데요. 좀 더 빠르게 DOM을 업데이트하기 위해 Virtual DOM이 등장했습니다.

Virtual DOM

Virtual DOM 이란 실제 DOM에 접근하여 조작하는 대신 이를 추상화하여 자바스크립트 객체를 구성하여 사용합니다. 마치 DOM 사본을 만드는 것과 비슷합니다.

https://www.javatpoint.com/what-is-dom-in-react

데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
이전 Virtual DOM과 업데이트 후의 Virtual DOM을 비교한다.
바뀐 부분만 실제 DOM에 적용한다.

이러한 처리는 실제 DOM이 아닌 메모리 상에서 동작하기 때문에 빠릅니다. 또한 실제 렌더링이 발생하지 않아 연산 비용이 적습니다.

요소가 30개가 바뀌었다고 레이아웃을 30개씩 새로 하는 것이 아니라 모든 변화를 하나로 묶어 딱 한 번만 실행시킵니다.

연산 횟수를 줄이기 때문에 실제 DOM보다 효율적입니다.
Virtual DOM이 하는 것은 DOM fragment를 사용하여 하나로 묶어 적용한 다음 DOM에 던져주는 과정에 불가합니다.

Virtual DOM은 무조건 빠르지 않다.

인터랙션이 많은 앱의 경우 Virtual DOM이 빠를 수 있지만 정적인 페이지의 경우 느릴 수 있습니다.