[React] DOM이란?

돔(DOM)이란 무엇일까?

DOM에 대한 개념이 무엇일까? 예전에 웹 공부를 할 때도 그렇고 지금 다시 리액트를 공부할 때에도 DOM에 대한 개념을 확실히 잡고 가야겠다는 생각이 들었기에 이번 시간에 정리해 보려고 한다.

• 우선, DOM이 있고, VirtualDOM이 있는데 기본적인 DOM의 개념부터 잡아보자.

DOM

DOM(Document Object Model)은 MDN에 따르면 HTML, XML 문서의 프로그래밍 interface라고 한다. 쉽게 이해하면, 웹 페이지를 이루는 요소들(태그 등)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이라고 생각하면 될 것 같다.

• 즉, DOM은 HTML, XML 등의 문서와 JavaScript를 이어준다.

VirtualDOM (가상돔)

DOM에 대한 간단한 이해는 하였다. 그렇다면 리액트에서 사용하는 ReactDOM은 도대체 또 무엇일까? ReactDOM은 VirtualDOM이라고 한다. ReactDOM에 대해 알아보기 전에 VirtualDOM이 무엇인지 먼저 알아보자.

Instagram이나 Facebook, YouTube같은 홈페이지를 생각해보자. 이러한 서비스들은 스크롤이 무한에 가깝게 계속 내려가며 스크롤이 될 때마다 새로운 데이터들을 서버에서 불러온다. 불러온 데이터에 따라서 UI는 계속해서 업데이트 될 것이다. 수많은 Document의 elements를 가진 서비스들이 계속해서 데이터가 실제 DOM에 직접적으로 접근하여 업데이트 된다면 이는 분명 무리가 될 것이라고 판단이 된다. 이는 곧 서비스의 이슈로 이어질 것 같다고 생각이 든다. DOM 자체는 빠르지만 페이지의 리페인트가 계속해서 발생한다면 속도가 늦춰질 것이라고 생각이 든다. (이는 더 알아본 다음에 다시 정리를 할 예정이다.)

실제 DOM에 접근하게 되면 위와 같은 문제가 발생한다. 이를 해결하기 위해 나타난 것이 Virtual DOM이다.

• 실제 DOM에 직접 접근하는 대신에, 이를 자바스크립트 객체로 구성하여 DOM을 추상화하여 사용하는 방식이다.
• React를 사용할 때에는 React가 모두 처리를 해주기 때문에, DOM API를 직접 구현하지 않아도 된다.

Virtual DOM의 반영

특정 홈페이지의 데이터가 변했다고 가정을 했을 때, Virtual DOM은 다음과 같은 플로우를 가진다.

• 기존 페이지의 데이터 버전을 v1, 바뀐 페이지의 데이터 버전을 v2라고 하자.

1. 데이터가 업데이트 되면, v2의 UI 전체를 Virtual DOM을 리렌더링한다.
2. 그렇다면 기존에 Virtual DOM에 있던 v1과 바뀐 현재의 v2를 비교한다. (Virtual DOM끼리 비교를 하는 것이다.)
3. 비교를 한 뒤, 바뀐 일부분만 실제 DOM에 적용이 된다.

이러한 과정은 결국 컴포넌트가 업데이트 될 때, 리플로우가 한 번 발생한다. (리플로우와 리페인트에 대한 개념은 이후에 다룰 예정)

실제 DOM에서 데이터가 업데이트 될 때마다 계속해서 작은 규모로 리플로우를 여러 번 하는 것보다 VirtualDOM을 이용하여 실제 DOM에서는 크게 한 번 리플로우 되는 것이 성능을 비교 했을 때, 성능 향상을 가져오게 된다.

참고글
React에서의 가상돔 개념