🧐 DOM이란?
웹 기술에 대한 정보를 제공하는 MDN에서는 DOM에 대해 다음과 같이 설명하고 있습니다.
"구조화된 표현"이라는 용어는 다소 추상적일 수 있으나, 자바스크립트가 웹 문서에 접근하고 조작할 수 있도록 돕는 매개체라는 점은 분명합니다. 또한, 객체 모델이라고 언급된 바, DOM은 객체 형태로 존재합니다.
DOM의 역할
웹 페이지의 구성 요소를 "객체"로 표현해야 하는 이유는 무엇일까요? 그 이유는 자바스크립트를 통해 동적으로 조작할 수 있기 때문입니다. 현대의 웹 페이지는 사용자와의 상호작용을 위한 다양한 요소들(버튼, 입력 필드, 모달 등)로 가득 차 있으며, 이러한 요소들은 자바스크립트를 통해 즉각적으로 조작되어야만 인터랙션에 따라 변화하는 UI를 효과적으로 제공할 수 있습니다.
💡 Virtual DOM
Virtual DOM이 등장한 배경을 이해하기 위해서는 브라우저가 HTML을 처리하여 화면에 그리는 과정을 살펴볼 필요가 있습니다.
브라우저의 렌더링 vs 리액트 렌더링
브라우저에서의 "렌더링"과 리액트에서의 "렌더링"은 서로 다른 개념입니다. 브라우저의 렌더링은 DOM과 CSSOM을 파싱하여 렌더 트리를 생성하고 화면에 그리는 과정을 의미하는 반면, 리액트에서의 "렌더링"은 브라우저에 전달할 DOM을 생성하는 과정을 의미합니다.
브라우저의 렌더링 과정
브라우저의 렌더링 과정은 다음과 같은 순서를 거칩니다.
1. HTML 파싱 및 DOM 트리 생성 : 브라우저는 서버로부터 HTML 문서를 받아서 DOM(Document Object Model) 트리를 생성한다.
2. CSS 파싱 및 CSSOM 트리 생성 : link 태그를 만나면 CSS 스타일시트를 파싱하고 CSSOM(CSS Object Model) 트리를 생성한다.
3. Render Tree 생성 : DOM과 CSSOM을 결합하여 Render Tree를 생성한다. Render Tree는 화면에 실제로 표시될 요소들로 구성된다.
4. 레이아웃: Render Tree를 기반으로 각 요소의 크기와 위치를 계산한다. 요소의 배치를 결정하는 단계이다. 만약 Render Tree가 바뀌었다면 레이아웃 과정도 다시 반복한다. 이를 Reflow라고 한다.
5. 페인팅: 레이아웃 정보를 바탕으로 화면에 요소들을 그리는 단계이다. Reflow가 발생하면 페인팅도 같이 발생한다. 이를 Repaint라고 한다.
6. 합성 : 페인팅된 요소들이 여러 레이어로 결합되어 최종적으로 화면에 표시된다.
Virtual DOM의 필요성
사용자가 페이지의 특정 부분만 최신 데이터로 업데이트하고자 버튼을 클릭하였을 때, 페이지 전체가 새로 고침된다면 얼마나 불편할까요? 이처럼 Render Tree가 자주 업데이트되면 레이아웃과 페인팅 과정이 빈번히 발생하여 성능 저하의 원인이 될 수 있습니다.
가상 DOM을 활용하면 실제 DOM의 변경을 최소화하고, 필요한 경우에만 Render Tree를 업데이트하여 효율성을 극대화할 수 있습니다. 이러한 점이 리액트가 가상 DOM을 채택한 핵심 이유입니다.
Virtual DOM은 어떻게 동작하는가?
먼저 가상DOM은 실제 DOM의 복사본입니다. 브라우저에 DOM을 조작하는것이 아닌 복사본을 만들어 메모리에 저장하고 리렌더링이 발생햇을 때에는 새로운 가상DOM을 만들어 기존에 메모리에 저장해 둔 가상 DOM과 비교하여 바뀐 부분만 실제 DOM에 적용하는 메커니즘입니다.
1. 렌더링 및 리렌더링
- 초기 렌더링: 컴포넌트가 처음 렌더링될 때, 리액트는 해당 컴포넌트의 render 메서드를 호출하여 Virtual DOM을 생성합니다.
- 리렌더링: 상태(state)나 속성(props)이 변경되면, 리액트는 다시 render 메서드를 호출하여 새로운 Virtual DOM을 생성합니다.
2. Diffing
- 새로운 Virtual DOM이 생성되면, 이전 Virtual DOM과 비교하여 변경된 부분을 찾습니다. 이 과정을 Diffing이라고 합니다.
- 리액트는 트리 구조를 비교하여 어떤 요소가 추가되거나 삭제되었는지, 또는 속성이 변경되었는지를 효율적으로 확인합니다.
3. 최소한의 업데이트
- Diffing을 통해 변경된 부분이 확인되면, 리액트는 실제 DOM에 최소한의 업데이트를 수행합니다. 즉, 전체 DOM을 다시 렌더링하는 것이 아니라, 필요한 부분만 수정합니다.
- 이를 통해 성능을 극대화하고, 불필요한 리플로우(reflow)와 리페인트(repaint)를 방지합니다.
😎 결론
기존의 전통적인 DOM 조작 방식에서는 변경된 부분뿐만 아니라 전체 렌더 트리를 수정해야 했고, 이로 인해 성능 문제가 발생했습니다. 반면, 리액트의 Virtual DOM은 내부 메커니즘(리액트 파이버, diffing 알고리즘) 변경된 부분만 효율적으로 처리하여 리플로우와 리페인트를 최소화함으로써 성능을 향상시키고 사용자 경험을 개선했습니다.
