Virtual DOM

브라우저의 렌더링 과정

1. DOM Tree 생성 - 렌더링 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리를 생성한다.
2. Render Tree 생성 - CSS 파일과 inline 스타일을 파싱하여 CSSOM(CSS Object Model)을 생성하고, DOM과 CSSOM을 결합해 Render Tree를 만든다.
3. Layout (Reflow) - Render Tree를 기반으로 각 노드가 화면에서 어디에 배치될지 좌표를 계산한다.
4. Paint (Repaint) - Render Tree에 따라 픽셀 단위로 화면에 요소를 그린다.

 

DOM 변화와 성능 문제

• DOM에 변화가 발생하면 Render Tree를 다시 생성해야 한다.
• 이로 인해 스타일 재계산, Layout(Reflow), Paint(Repaint) 과정이 반복되며, 성능에 부담을 준다.
• 특히 Layout(Reflow) 과정은 브라우저의 렌더링 엔진에 큰 부담을 주기 때문에 성능 최적화가 중요하다.

 

SPA와 Virtual DOM

• SPA(Single Page Application)는 전체 페이지를 서버에서 매번 받아오는 방식 대신, 브라우저에서 JavaScript가 UI와 상태를 관리한다.
• DOM 조작이 빈번하기 때문에, 성능 문제를 해결하기 위해 Virtual DOM이 등장했다.

 

Virtual DOM이란?

• Virtual DOM은 HTML DOM의 추상화된 버전이다.
• 실제 DOM과 유사한 속성을 가진 JavaScript 객체이며, DOM API는 포함되어 있지 않다.

 

Virtual DOM의 동작 원리

1. Props나 상태 변경 시 - 전체 UI를 Virtual DOM에 새로 렌더링한다.
2. Diffing (비교) - 새로 생성된 Virtual DOM과 이전 Virtual DOM을 비교(Diffing)하여 변경된 부분을 찾는다.
3. Reconciliation (조정)
   • 변경된 부분만 실제 DOM에 반영한다.
   • 전체 실제 DOM을 갱신하지 않고 필요한 부분만 업데이트하여 성능을 최적화한다.

Virtual DOM의 장점

• Virtual DOM은 브라우저에서 실제로 렌더링되지 않으므로 연산 비용이 적다.
• 효율적인 DOM 업데이트를 통해 UI를 최적화하고, 불필요한 렌더링을 방지한다.