[React] 가상 돔 (Virtual DOM)이란 무엇일까?

가상 돔 (Virtual DOM)이란 무엇일까?

 

DOM 이란?

 
DOM이란 Document Object Model의 줄임말이다. elements를 담고 있는 문서를 Document라고 한다. 브라우저는 페이지에 해당하는 화면을 분석해서 화면에 렌더링 한다.

DOM이란 웹 페이지에 들어가 있는 html elements를 트리 형태의 구조로 표현한 것이다. DOM 트리 안에는 각각의 element에 상응하는 Node가 들어있다. 개발자들은 DOM이 제공하는 API를 통해서 DOM 구조에 접근을 하고 원하는 element의 내용, 구조, 스타일 등을 원하는 대로 변경시킬 수 있다. 이러한 행위를 DOM 조작이라고 한다.

자바스크립트 같은 경우는 getElementById()나 querySelector()를 통해서 DOM 구조 안에 있는 element에 접근해서 원하는 대로 내용, 스타일, 레이아웃 등을 수정할 수 있다.

 

✏️ 그렇다면 리액트에서 가상 돔(Virtual DOM)이란 무엇일까?
 

가상 DOM이란 실제 DOM과 같은 내용을 담고 있는 복사본이라 생각하면 된다. 그렇기 때문에 실제 DOM 안에 있는 모든 elements를 똑같이 갖고 있다. 하지만 가상 DOM은 브라우저에 있는 문서에 직접적으로 접근할 수 없다. 그렇기 때문에 화면에 보이는 내용을 직접 수정할 수도 없다. 실제 DOM에 접근하여 조작하는 대신 이를 추상화하여 자바스크립트 객체를 구성하여 사용한다. 
 
왜 굳이 복사본을 따로 메모리에 저장해 두는 걸까?라고 생각할 수 있는데 리액트는 가상 돔을 굉장히 똑똑하게 사용해서 실제 돔을 조작하는 시간을 줄여준다.


 

📒 실제 DOM 조작 과정

 
웹 페이지에서 DOM 조작은 필수적인 과정이다. 게시물을 추가하거나 댓글을 다는 등의 아주 간단한 일을 할 때도 화면을 바꾸기 위해서 DOM을 조작한다.

DOM이 조작될 때 다음과 같은 과정이 일어난다. 브라우저가 현재 페이지의 html을 탐색하면서 해당 element를 찾는다. 그러고 해당 element와 잔여 element 들을 DOM에서 제거한다. 그러고 새롭게 수정된 elements로 교체한다.

그러고 나서 CSS를 다시 계산하고 레이아웃 정보를 알맞게 수정하고 새롭게 계산된 내용을 브라우저에 다시 그려준다.  이렇게 DOM이 업데이트될 때마다 render 트리를 재 생성하고 reflow와 repaint 과정을 거치게 된다. 

 

📒 리액트의 가상 DOM 조작 과정

 
매번 DOM을 조작할 때마다 브라우저 화면의 UI를 새롭게 그려주는 작업은 꽤나 복잡하고 시간이 걸리는 작업이다. 그리고 하나하나 다시 업데이트를 해야 하기 때문에 굉장히 비효율적이다. 그래서 리액트는 가상 DOM을 이용해서 비효율적인 DOM 조작을 훨씬 가볍고 빠르게 만들어 준다.

리액트는 항상 2개의 가상 DOM을 가진 객체를 갖는다. 첫 번째 가상 돔은 렌더링 이전에 화면 구조를 나타내는 가상돔이고, 두 번째 가상 돔은 렌더링 이후에 보이게될 화면 구조를 담은 객체이다. 리액트는 state가 변경될 때마다 화면이 새롭게 렌더링 된다. 리액트는 렌더링이 발생될 상황에 놓일 때마다 새로운 화면에 들어갈 내용이 담긴 가상 돔을 생성한다. 실제 브라우저에 그려지기 이전에 말이다.

그런 후에 업데이트 이전의 첫 번째 가상 돔과 업데이트 이후의 두 번째 가상 돔을 비교해서 정확히 어느 element들이 변했는지 찾아낸다. 이러한 과정을 Diffing이라고 한다.

Diffing은 효율적인 알고리즘을 사용해서 진행되기 때문에 정확히 어느 element들이 변경되었는지 굉장히 빨리 파악할 수 있다. 이렇게 바뀐 element들을 파악한 다음에 바뀐 부분만 실제 돔에 적용시켜 준다. 이것을 바로 Reconciliation(재조정)이라고 한다. 

리액트에서 재조정이 효율적인 이유는 바로 Batch Update 때문이다. 변경된 모든 element들을 집단으로 실제 돔에 한 번에 적용시켜 준다. 즉 변경된 내용을 한 번에 다 받아와서 한꺼번에 바뀐 모든 부분들을 집단으로 적용시켜 준다.
 

📌 [Virtual DOM 정리]


1. 리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다. 그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.

2. 리액트는 항상 두 개의 가상돔을 갖고 있다. 첫 번째 가상돔은 변경 이전의 내용을 담고 있고, 두 번째 가상돔은 변경 이후에 보인 내용을 담고 있다. 

3. 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되고 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 그리고 이러한 과정을 Diffing이라고 부른다.

4. Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로 실제 DOM에 한 번에 적용시켜 준다. 그리고 이러한 과정을 Reconsiliation, 재조정이라고 한다.

 

 
📕참고: 유튜브 별코딩 Virtual DOM 영상