Real DOM & Virtual DOM

"DOM(Document Object Model)"이란 :

"문서 객체 모델"이라는 뜻이며 트리 구조로 되어 있어서 이해가 쉬운 객체 모델이다.

"Real DOM"이란 무엇일까 :

간단히 말하자면 실제로 웹 페이지에서 사용되는 "문서 객체 모델"을 의미하고 이 DOM은 HTML 구조를 트리 형태로 표현하며 JS를 통해 조작할 수 있다.

Real DOM의 장점 :

1. HTML 구조와 거의 동일한 트리구조로 되어 있어 직관적이고이해가 쉽다.


2. 웹 표준으로 표준화되어 널리 사용되며 모든 브라우저에서 일관성있게 동작한다.


3. 다양한 메서드와 이벤트 처리 기능을 제공하여 복잡한 웹 App을 쉽게 구현할 수 있다.

Real DOM의 단점 :

1. 트리의 크기가 커질수록(요소의 수가 많아질수록) DOM을 업데이트 하는 데에 더 많은 시간이 소요되고, 요소를 추가 및 삭제할 시 트리 전체를 재렌더링 할 수 도 있어 성능저하 발생 가능성이 있다.


2. DOM 조작은 상대적으로 느린 작업이며 JS와 DOM 간의 상호작용은 비용이 크기 때문에 빈번한 업데이트가 필요할 경우 성능에 영향을 미칠 수 있다.

위와 같이 DOM의 크기가 커지면 커질수록 DOM을 조작하는 작업은 더 복잡해지고 느려질 수 있으며 이러한 문제를 해결하고자 Virtual DOM 같은 기술이 사용되는데 이 기술은 실제 DOM에 대한 직접적인 조작을 줄여 성능을 개선한다.
(아래로 내리다 보면 추가적인 설명이 담겨있다...)

"Virtual DOM"은 무엇일까 :

실제 DOM의 추상화된 표현으로 주로 React와 같은 라이브러리에서 사용된다.

React는 페이스북에 의해 개발된 UI 구축을 위한 JS 라이브러리이며 SPA(단일 페이지 APP)에서 자주 사용된다.

Virtual DOM의 장점 :

1. 실제 DOM 조작을 최소화하여 변경사항을 메모리 내에서 처리 후 한 번에 업데이트해서 성능이 크게 개선된다.


2. 변경사항을 비교하고 필요한 부분만 업데이트하여 전체 DOM을 재랜더링할 필요가 없다.


3. SQL, React 같은 구현방식이나 절차를 직접 기술하지 않고 결과를 기술하는 선언적 프로그래밍 방식으로 UI를 작성할 수 있어 코드가 간결하고 유지보수가 쉬워진다.

Virtual DOM의 단점 :

1. 가상 DOM을 관리하는 과정에서 약간의 메모리와 CPU 자원을 소모하므로 오버헤드의 가능성이 있다.


2. 가상 DOM을 사용하는 라이브러리나 프레임워크에 대한 이해가 필요하여 초기 학습 시 어려움이 있을 수 있다.

참고 문헌 :
https://velog.io/@somfist/Virtual-dom%EA%B3%BC-Real-dom%EC%9D%98-%EC%B0%A8%EC%9D%B4