Virtual DOM

리액트를 사용하다보면 리액트는 브라우저의 DOM이 아닌 Virtual DOM을 사용한다는 말을 들어봤을 것이다. 리액트가 Virtual DOM을 사용하는 이유는 무엇이며 사용하면 기존의 DOM을 사용하는 것과 어떠한 점이 다를까?

DOM 이란?

DOM은 원본 HTML 문서의 객체 기반 표현이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

DOM이 SPA에서 비효율적인 이유

HTML 파서는 HTML 문서를 바탕으로 DOM 트리를 만든다. 하지만 DOM 조작을 통해서 화면 요소를 바꾸면 DOM 트리를 재구성할 필요가 있다. 트리가 재구성되면서 브라우저는 Layout, Painting 작업을 다시 진행한다. 이러한 과정, 즉 DOM 조작이 SPA(Single Page Application)에서 많이 발생한다. 변화를 적용하기 위해 브라우저가 많은 연산을 해야하며, 전체적인 프로세스를 비효율적으로 만들게 된다.

Virtual DOM

이러한 부분에서 Virtual DOM이 등장하게 되었다. 만약에 뷰에 변화가 생기면, 그 변화는 실제 DOM에 적용되기 전, 가상으로 만든 DOM에 먼저 적용시키고, 최종적인 결과를 실제 DOM에 전달해준다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선된다.

Virtual DOM은 렌더링을 수행하지 않기 때문에 연산 비용이 적다. 연산이 끝나면 최종 결과를 실제 DOM에 전달한다. 딱 한번 모든 변화를 하나로 묶어서. Virtual DOM 없이 이러한 작업을 수동으로 수행할 수 있지만, 자동으로 해준다는 점에서 편리하다. 변화가 있을 때, DOM fragment에 적용한 다음에 기존 DOM에 던져준다. 기존값중 어떤게 바뀌었고, 어떤것이 바뀌지 않았는지 파악하는 것도 Virtual DOM에서 자동으로 수행한다.

DOM 관리를 Virtual DOM이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM을 조작했다던지에 대한 정보를 공유할 필요가 없다. 각, 변화들의 동기화 작업을 거칠 필요없이 모든 작업을 하나로 묶어 줄 수 있게 되는 것이다.

Reference

https://wit.nts-corp.com/2019/02/14/5522
https://velopert.com/3236