Virtual Dom이란 무엇인가?

Virtual Dom이란 무엇인가?

Virtual Dom에 대해 알아보기 전, 먼저 DOM의 기본 개념에 대해서 알아보자

 

DOM(Document Object Model)

각 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저는 분석해 페이지를 띄워준다. DOM이란 이런 HTML element들을 tree형태로 표현한 것이다.

 

출처 : https://www.javatpoint.com/what-is-dom-in-react

 

 

Virtual DOM

Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 쉽다. 복사본은 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있다.

Virtual DOM은 실제 DOM의 복사본이기 때문에, 실제 DOM의 모든 element과 속성을 공유한다. 차이점은 브라우저에 있는 문서에 직접적으로 접근할 수 없다는 점인데, 이 때문에 화면에 보이는 내용을 직접 수정할 수 없다.

그렇다면 Virtual DOM은 왜 사용하는 것일까?

 

기존 DOM 원리로 알아보자.

만약 폰트의 컬러를 바꾸고 싶으면, 다음과 같이 DOM조작을 필요로 하게 된다.

document.querySelector(‘#title”).style.color = “red”;

브라우저는 HTML을 탐색해 해당 Element를 찾고, 해당 Element와 자식 Element들을 DOM에서 제거한다. 이후 새롭게 수정된 Element로 이를 교체하는데요. CSS는 이 과정 이후 다시 계산하여 결과적으로는 레이아웃 정보를 알맞게 수정하게 되는 것이죠. 새롭게 계산된 내용이 브라우저에 그려지는 방식으로 플로우가 진행된다.

 

이렇게 되면, DOM은 애플리케이션 사용자 인터페이스를 업데이트하기 위해 변경될 때마다 렌더링 된다. 이는 많은 UI 구성요소와 복잡한 DOM 구조로 인해 변경될 때마다 다시 렌더링해야 하므로 업데이트 비용이 더 많이 들고 무거워 질 수 있다.

 

이렇게 등장한 개념이 Virtual DOM이다.

가상 DOM은 실제 DOM과 내용을 공유하는 복사본으로 메모리에 저장되어 있는 자바스크립트 객체이다. 그래서 직접적으로 브라우저 화면의 UI를 조작할 수 있게 해주는 API는 제공하지 않는다. 그래서 실제 브라우저에 접근하는 것이 아니기 때문에 가상돔에 접근하고 수정하는 것은 매우 가볍고 빠르게 작업할 수 있다.

 

그렇다면 리액트는 어떤 식으로 가상돔을 활용해 보다 효율적으로 실제 DOM을 조작할까?

React에서의 Virtual DOM 조작 원리

리액트는 항상 두개의 가상돔 객체를 가지고 있다.

1. 렌더링 이전 화면 구조를 나타내는 가상돔
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

리액트는 STATE가 변경될 때마다 Re-Rendering이 발생하는데, 이 시점마다 실제 브라우저가 그려지기 전에 새로운 내용이 담긴 가상돔을 생성하게 된다.

출처 : https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb

 

렌더링 이전에 화면의 내용을 담고 있는 첫 번째 가상돔과 업데이트 이후에 발생할 두 번째 가상돔을 비교해 어떤 Element가 변했는지를 비교한다 이를 리액트에선 Diffing이라고 표현한다.

 

리액트는 Diffing을 통해 차이가 발생한 부분만을(브라우저상의) 실제 DOM에 적용한다.

또한 리액트는 변경된 모든 Element들을 집단화시켜 이를 한번에 실제 DOM에 적용한다.

예를 들어, 리스트안에 10개의 항목이 바뀌었다면 실제 DOM을 10번 반복해 수정하는 것이 아닌, 한 번에 집단화시킨다. 이는 변경된 Element를 별개로 그려주는 것이 아닌, 변경된 내용을 한 번에 받아와 이를 실제 DOM에 한 번에 적용시켜 효율을 높일 수 있다.