[React]React의 Virtual DOM

📌 들어가며...

리액트는 가상돔(Virtual DOM)을 통해 효율적이고 빠르게 우리가 원하는 페이지를 브라우저에 그려줄 수 있습니다. 

리액트를 사용하는 개발자시라면 Virtual DOM은 무조건 학습하셔야 합니다! (저 포함...)

이번 포스팅에서는 DOM이 무엇인지, Virtual DOM이 무엇인지 그리고 그 작동원리에 대해 알아보겠습니다!

---

📌 DOM (Document Object Model)

우선 Document 란 각각의 HTML 요소(Elements)들을 담고 있는 웹페이지입니다. 브라우저는 이 Document를 분석하여 우리에게 웹 페이지를 띄워주게 됩니다. 

 

DOM은 이러한 HTML 요소들을 Tree 형태로 표현한 것으로, 각 요소에 상응하는 Node를 가집니다. 

DOM은 HTML과 JavaScript를 서로 이어주는 인터페이스 역할을 하게 됩니다. 즉, 우리는 DOM이 제공하는 DOM API를 통해 DOM 구조에 접근하고, 원하는 요소를 조작할 수 있게 됩니다. 이를 DOM 조작이라고 하죠! 

docmunet.querySelector() 등과 같은 것들이 DOM API에 포함됩니다.

 

흔히 HTML로 틀을 만들고, CSS로 꾸미며, JavaScript로 동적이게 만든다라고 하죠?

JavaScript로 동적으로 제어한다 == DOM을 제어한다 == DOM을 조작한다 라고 이해하시면 될 것 같습니다.

DOM 이미지

 

실제 DOM 조작 과정을 살펴보겠습니다. 위 이미지에서 div 에 해당하는 요소의 color 를 빨간색으로 변경한다고 가정하겠습니다. 

1. DOM에서 해당 HTML 요소를 탐색합니다.
2. DOM에서 해당 요소와 그 자식 요소들을 모두 제거합니다.
3. 변경된 내용으로 해당 부분을 교체합니다.
4. CSS를 재계산합니다.
5. 레이아웃을 알맞게 조정하여 화면에 그려줍니다.

대규모 프로젝트에서는 이러한 과정이 반복되다보면 충분히 무거워질 수 있는 작업이 되며 성능 이슈가 발생하게 됩니다.

DOM 자체는 빠르다고 합니다. 하지만, 웹브라우저가 CSS를 다시 연산하고.. 레이아웃을 재구성하고.. 페이지를 리페인트하는 과정에서 많은 시간이 소모되게 됩니다. 

---

📌 리액트 Virtual DOM

리액트는 Virtual DOM을 통해 실제 DOM을 조작하는 것보다 빠르게 UI를 업데이트할 수 있게 됩니다. 

 

그렇다면, Virtual DOM(가상 돔)이란 무엇일까요?

Virtual DOM 은 실제 DOM과 같은 내용을 담고 있는 복사본으로, 실제 DOM의 모든 Element와 속성을 공유합니다. 하지만 Virtual DOM은 실제 DOM이 아닌, JavaScript 객체 형태로 메모리 안에 저장되어 있습니다. 

따라서, Virtual DOM은 실제 DOM과 다르게 직접적으로 UI를 조작할 수 있는 API를 제공하지 않기 때문에 브라우저 문서에 직접적으로 접근이 불가합니다. 

 

그럼 왜 굳이 복사해서 사용하는 것일까요? 리액트는 이러한 Virtual DOM 을 이용하여 더욱 빠르게 변경 사항을 반영할 수 있습니다. 

 

리액트는 항상 2개의 가상돔 객체를 갖고 있습니다. 

• 렌더링 이전의 가상돔 객체
• 렌더링 이후에 보여질 가상돔 객체

props, state, 또는 부모 컴포넌트가 변경될 때마다 리액트 컴포넌트는 리렌더링이 됩니다. 

이때, 리액트는 렌더링 이후에 보여질 가상돔 객체를 생성하게 됩니다. (브라우저에 그려지기 이전에)

렌더링 이전 가상돔과 이후 가상돔을 비교하여 정확히 어느 Element가 변했는지 비교하게 되는데, 이러한 과정을 Diffing 이라고 합니다. 

리액트는 이를 통해 차이가 발생한 부분만을 실제 DOM에 적용하게 되며, 이 과정을 Reconciliation(재조정)이라고 합니다.  

 

리액트의 재조정이 효율적인 이유는 바로 Batch Update 때문입니다. Batch 는 '일괄'이라는 사전적 의미를 갖고 있는데, 말 그대로 일괄 수정을 하게 됩니다. 

즉 변경된 모든 Element들을 집단으로 모두 한번에 실제 DOM에 적용시켜 줍니다. 예를 들어 10개의 항목이 바뀌었다면, 10번의 업데이트가 아닌, 1번의 업데이트로 모든 변경사항을 반영하게 되는 것이므로 훨씬 더 빠르고 효율적이겠죠?

 

---

📌 Virtual DOM의 장단점

✅ 장점

• 성능 향상: 가상 돔은 메모리 상에서만 동작하므로, 비용이 높은 실제 DOM 조작을 최소화합니다.
• 렌더링 성능 향상: 변경된 부분만 실제 DOM에 적용합니다.
• 렌더링 일관성: 상태 변화를 추적하고 적절한 타이밍에 변경 사항을 적용합니다.
• 복잡한 UI 관리: 규모가 큰 프로젝트에선 UI를 관리하기 위해 컴포넌트 기반 아키텍처를 사용하게 되는데, 가상돔은 컴포넌트를 가장 효율적으로 관리할 수 있게 해줍니다. 
• Cross-Platform 지원: 브라우저와 독립적인 방식으로 동작하므로, React Native와 같은 플랫폼에서도 활용 가능합니다.

✅ 단점

• 추가적인 메모리 사용: 가상돔은 메모리 상에 실제돔과 완전히 동일한 구조로 존재하므로, 추가적인 메모리가 사용됩니다.
• 특정 상황에서의 불필요함: 간단한 UI나 작은 규모의 앱에서는 불필요한 오버헤드를 발생시킵니다.

---