Virtual DOM

리엑트를 사용하는 이유에는 여러가지가 있다.
그중에서 가상 DOM 은 큰 특징이다.

---

DOM

 

웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.

DOM 은 애플리케이션 전체 UI 를 나타내고 트리 구조로 표현된다.

여기에는 Web Document 에 있는 각 UI 요소에 대한 노드가 포함된다.

웹 개발자가 자바스크립트를 통해 컨텐츠를 수정할 수 있기 때문에 유용하다.

또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고 모든 코드 작업이 쉬워지기 때문에 도움이된다.

 

---

DOM 의 문제점은?

 

DOM 은 트리 구조로 되어 있어 이해하기 쉽지만, 노드의 수가 많아질 수록 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.

또 최근 웹은 SPA 를 사용한다. 하나의 웹 페이지를 어플리케이션처럼 구성하는 SPA 에서는 HTML 문서 자체가 하나이며, 여러 동적인 기능이 들어가기에 안그래도 리소스가 모두 합쳐진 무거운 HTML 문서를 지속적으로 재렌더링 해주어야 하는 문제점이 발생한다.

 

DOM 을 업데이트 하는 것은 컨텐츠 변경을 포함할 뿐 아니라 훨씬 더 많은 작업들이 요구된다. 또한 CSS 를 다시 계산하고 레이아웃을 변경하려면 복잡하며 성능에 영향을 끼친다.

 

기존에는 화면의 변경사항을 DOM 을 직접 조작해 브라우저에 반영했다.

이 방법의 큰 단점은 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이다.

화면에서 100개의 수정사항이 발생하면 수정 할 때마다 새로운 렌더 트리가 100번 수정되면서 새롭게 만들어지게 된다.

---

Virtual DOM

 

리엑트에서 사용하는 가상 DOM 도 실제 DOM 내용에 기반하여 만들어진다.

가상 DOM 은 실제로 화면에 렌더링 하는 것이 아니기에 DOM 을 직접 업데이트하는 것 보다 상대적으로 빠르다.

 

가상 DOM 은 가상 UI 표현이 메모리에 유지되고 React DOM 과 같은 라이브러리에 의해 실제 DOM 에 동기화된다.

이 방식은 리엑트의 선언적 API 를 가능하게 한다.

 

 

 

---

왜 가상 DOM 을 사용해야 할까?

 

실제 DOM 에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM 을 조작하는 작업이 무겁기 때문이다.

리엑트는 실제 DOM 의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM 을 만들어 관리한다.

가상 DOM 은 실제 DOM 에서 처리하는 방식이 아닌 가상 DOM 과 메모리에서 미리 처리하고 저장한 후 실제 DOM 과 동기화하는 개념이다. 해당 DOM 을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다.

 

Virtual DOM 은 왜 효율적일까?

 

가상 DOM 을 사용하면 실제 DOM 을 접근해 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성해 사용한다.

DOM 의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용반 반영해 성능 향상이 된다.

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

---

실제 DOM 은 느릴까?

 

리엑트는 대규모 SPA 와 다이나믹 UI 의 웹 페이지를 만들기 위해 존재한다.

만약 규모가 작고 정적인 이전의 웹 애플리케이션이라면 일반 DOM 이 성능이 더 좋다.

실제 DOM 은 초기 정적인 웹페이지에 맞게 설계되어 정적인 성격을 가지고 있으며 현재 트렌드인 동적인 웹 애플리케이션에 사용하려면 성능적인 문제가 발생한다.

복잡한 SPA 에서는 DOM 조작이 빈번하게 발생하며 그 변화를 적용하기 위해 브라우저는 많은 연산을 하게 되고 전체적인 프로세스가 비효율적이게 된다.

---

정리

 

•  Virtual DOM 은 Real DOM 의 가상 표현이다.
•  리엑트는 먼저 Virtual DOM 의 상태 변경을 업데이트 한 다음 Real DOM 과 동기화 한다.
•  Virtual DOM 은 기계의 청사진과 같아서 청사진을 변경할 수 있지만 이런 변경사항은 직접 적용되지 않는다.
•  Virtual DOM 은 UI의 가상 표현이 ReactDOM 과 같은 라이브러리에 의해 Real DOM 과 동기화된 메모리에 유지되는 프로그래밍 개념이며 이를 조정이라고 한다.
•  Virtual DOM 이 성능을 더 빠르게 만드는 것은 처리 자체가 더 짧은 시간에 완료되기 때문이 아니다. 그 이유는 변경된 정보의 양이다. 전체 페이지를 업데이트 하는 데 시간을 낭비하는 대식 작은 요소와 상호작용을 한다.

 

	Real DOM	Virtual DOM
업데이트	느리다.	빠르다.
HTML 업데이트 방식	HTML 을 직접적으로 업데이트	HTML 을 직접적으로 업데이트 하지 않음
새로운 element 업데이트 방식	새로운 element 가 업데이트 된 경우 새로운 DOM 생성	새로운 element 가 업데이트 된 경우 새로운 Virtual DOM 생성 후 이전 DOM 과 비교해 차이점만 업데이트
메모리	메모리 낭비가 심함	메모리 낭비가 덜함

 

 

---

참고링크

 

https://www.geeksforgeeks.org/reactjs-virtual-dom/

ReactJS Virtual DOM - GeeksforGeeks

https://velog.io/@ctdlog/React-DOM%EC%9D%B4%EB%9E%80-Virtual-DOM%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

[React] DOM이란? Virtual DOM을 사용하는 이유?

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/

Vanilla Javascript로 가상돔(VirtualDOM) 만들기 | 개발자 황준일

https://doqtqu.tistory.com/316

Virtual DOM, 가상 돔 이란?

https://legacy.reactjs.org/docs/faq-internals.html

Virtual DOM and Internals – React