[React] Virtual DOM

DOM이란?

Document Object Model의 약자로, 직역하면 문서 객체 모델이다. 

 

웹페이지가 로드될 때 브라우저가 요소들을 모아 하나의 문서를 구성한다.

이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 DOM이다. 

 

 

Document는  HTML, Object는 노드 트리로 유추할 수 있다. 

이때 노드란 HTML 태그들이다. DOM은 위 사진과 같이 노드를 트리(tree) 형태로 표현한다. 

 

🌐 브라우저 동작 원리 

브라우저가 HTML 파일을 받으면 이를 파싱(변환) 하고 노드들로 이루어진 DOM 트리를 생성한다.

이후 외부 CSS 파일과 inline 스타일을 파싱하여 스타일을 입힌 Render 트리를 생성한다. 

각 노드들이 화면 어디에 나타나야 하는지 정확한 위치가 주어진다. 

 

이렇게 해당 과정을 반복하여 동작하는데, 페이지 전체가 아닌 특정 요소에 변환을 주고 싶은 경우, 해당 요소를 DOM 트리에서 찾고 변경 사항을 적용하기 위해 다시 브라우저가 화면을 그리는데 많은 비용이 발생한다.  

💡 리플로우(Reflow) 
DOM의 구조나 레이아웃이 변경되면 브라우저는 새로운 레이아웃을 계산하고 화면을 다시 그림 

💡 리페인트(Repaint)
요소의 색상이나 테두리 등 외양이 변경되면 브라우저는 해당 요소를 다시 그림. 

 

이렇게 무거운 작동 방식 때문에 속도 저하, 화면 깜빡임 등의 문제로 사용자 경험이 떨어질 수 있다. 

 

이러한 문제를 해결하기 위해 React에서 가상 DOM이라는 개념을 도입한 것이다. ! 

📍 Virtual DOM(가상돔) 

가상 DOM은 실제 DOM(Document Object Model)을 조작하는 방식이 아닌 실제 DOM을 모방한 가상의 DOM을 구성해 기존의 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동한다. 

 

최소한의 DOM 조작을 가능하게 하며 데이터가 변할 때마다 새로운 화면을 띄우는 것이 아닌 필요한 부분만 업데이는 하는 것이다. 

Virtual DOM 동작 원리 

 

1. UI가 변경을 감지하면 가상 DOM으로 렌더링 
2. 현재 가상DOM과 이전(상태 변화 전) 가상 DOM 을 비교해 차이를 계산 
3. 변경된 부분을 실제 DOM에 반영