Virtual DOM 이란?
Virtual DOM은 리액트 사용의 장점 중 하나로 알려져있다.
Virtual DOM이 무엇인지, 왜 Virtual DOM이 장점으로 작용하는 지 정리해본다.
DOM이란?
Virtual DOM에 대해 알아보기 전 DOM에 대해 알아보자.
DOM(Document Object Model, 문서 객체 모델)은 웹 페이지 문서 구조를 표현화하여 스크립트 및 프로그래밍 언어와 페이지를 연결한다. DOM을 통해 JS에서 HTML의 요소들에 접근하고, 수정할 수 있는 것이다.
기존의 웹은 정적인 페이지를 구성하여 DOM을 자주 변경하지 않아 문제가 되지 않았지만,
SPA가 등장하고, SPA의 경우
하나의 웹 페이지를 어플리케이션처럼 구성하는 SPA에서는 HTML 문서 자체가 하나이며, 여러 동적인 기능이 들어가기 때문에 리소스가 모두 합쳐진 무거운 HTML 문서를 지속적으로 재랜더링(DOM을 업데이트) 해줘야한다.
는 특성 때문에 기존의 DOM을 사용할 경우 속도 저하, 잦은 오류와 같은 문제가 발생했다.
SPA 환경에서 이러한 문제를 해결하고자 좀 더 빠르게 DOM을 업데이트할 수 있는 Virtual DOM이 등장하였다. 이것이 SPA 환경에서 Virtual DOM을 사용하는 이유이다.
(정적인 웹에서는 DOM을 사용하는 것이 더 적합하다고 한다.)
Virtual DOM의 동작방식
Virtual DOM은 실제 DOM과 내용을 공유하는 복사본이다. 가상 DOM은 메모리에 저장되어 있는 자바스크립트 이고, 실제 브라우저에 접근하는 것이 아니기 때문에 가상 DOM에 접근하고 수정하는 작업은 실제 DOM을 조작하는 것보다 가볍고 빠르다.
실제 DOM을 조작하는 것이 아닌, 가상 DOM과 메모리에 먼저 처리한 후, 실제 DOM과 동기화하는 방식으로 동작한다.
- UI에 변화가 일어난다.
- 전체 UI를 Virtual DOM(메모리)에 리렌더링한다.
- 메모리에 저장되어있는 이전 DOM과 비교한다.
- 차이점이 발생한 부분만 찾아 업데이트 한다.
데이터의 업데이트가 10번 발생했을 때,
기존의 DOM은 사소한 변화가 발생하더라도 모든 요소 전체를 리렌더링하는 과정이 10번 일어나지만,
가상 DOM은 변화가 발생한 부분만 탐지하여 변경하고 실제 DOM에 적용한다. 변경 사항들을 가상 DOM에서 처리해 두었다가 전체 화면을 리렌더링 하는 과정은 1번 일어나는 것이다.
이와 같은 특성 때문에 Virtual DOM은 업데이트 속도가 빠르고, 메모리의 낭비가 덜하다.
정보 출처
https://doqtqu.tistory.com/316
https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb
