Virtual DOM 을 왜 쓰나요?

React 를 완벽하게 이해한다고 생각했지만 Virtual DOM 을 왜 쓰는건지?
자세하게는 알지 못한다고 생각해서 간단하게 정리해 봤습니다.

 

DOM

virtual DOM 을 이해하기 전에 간단하게 DOM 이 무엇인지 짚고 넘어가겠습니다. 

 

 

DOM은 Document Object Model의 약자입니다.
웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.

간단히 말해, 웹 페이지의 모든 요소들을 객체로 표현하고, 이들 객체 간의 관계를 정의합니다.

 

virtual DOM vs DOM

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁습니다.
그래서 React에서는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해서 내부적으로 가상 DOM을 만들어서 관리합니다.

🙍 : 그럼 DOM 은 어떤 경우던 Virtual DOM 보다 느리겠네??

 

아닙니다. 만약 규모가 작고 정적인 웹 애플리케이션이라면 일반 DOM이 성능 이 더 좋습니다.
하지만 요즘 웹페이지 트랜드는 동적인 웹 애플리케이션 입니다.
예를 들어 페이지를 스크롤하면 더 많은 유저 정보를 볼 수 있는 페이스북도 이에 해당합니다. 요소 개수가 몇 천개씩으로 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생하기 시작합니다. 즉 느려진다는 말인데요. 이것이 정확한 말은 아닙니다.
요즘은 기술이 고도로 발전된 환경에서 DOM 자체 성능은 나쁘지 않습니다.
그러면 어떤 경우 때문에 성능 이슈가 발생한다는 걸까요??
바로 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것입니다.

 

결론은 최근 트렌드의 복잡한 SPA에서는 DOM 조작이 굉장히 빈번하게 발생하며, 그 변화를 적용하기 위해서는 브라우저가 많은 연산을 하게 되고, 결국 전체적인 프로세스가 비효율적이게 되는 결과를 야기합니다.
결국 속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자 가상돔(Virtual DOM)이 나왔습니다.

🙍 : 정적인 웹페이지? 동적 웹페이지? 그게 뭔데??
🙎‍♂️ : 정적인 웹페이지는 항상 같은 내용이고, 사용자가 페이지를 새로고침할 때마다 항상 똑같은 것을 보여줘!!
그러나 동적인 웹 애플리케이션은 사용자가 상호 작용할 때마다 내용이 바뀌지. 예를 들어, 채팅 앱이나 실시간으로 업데이트되는 게시글을 보여주는 트위터 같은 것이 동적인 웹 애플리케이션이야!!

 

Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.
DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능이기도 합니다.

 

Virtual DOM 의 작동 방식

• 실제 DOM 으로부터 Virtual DOM 을 만듭니다. Virtual DOM 은 메모리 상에 존재하는 하나의 객체입니다.
• 변화가 생기면 새로운 버전의 Virtual DOM 을 만듭니다.
• Old 한 버전의 Virtual DOM 과 New 버전의 Virtual DOM 을 비교합니다.
• 비교 과정을 통해서 발견한 차이점을 Real DOM 에 적용합니다.

 

비용

Virtual DOM 의 가장 큰 장점은 비용입니다.
기존에 DOM 은 요소의 변화가 감지되면 브라우저를 전체 리렌더링 합니다.
하지만 리액트는 DOM 에 변화가 감지되면 real dom을 새롭게 렌더링 시키는 대신, virtual dom이라는 메모리상의 객체를 새로 만드는 방식입니다.

브라우저를 렌더링 시키는 비용 vs 객체를 새로 만드는 비용

 

말할 것도 없이, 브라우저를 새롭게 렌더링 시키는 비용보다, 객체를 새로 만드는 비용이 훨씬 더 저렴합니다.
이것이 왜 DOM 을 직접 조작하는 것보다, virtual dom을 이용하는 것이 더 효율적인지에 대한 더 나은 대답입니다.