[React] 가상 돔(Virtual DOM)

DOM 이란?

DOM은 Documnet Object Model의 줄임말로, 웹 페이지를 이루는 태그들을 JS가 이용할 수 있도록 브라우저가 트리 구조로 만든 객체 모델을 말한다. 그대로 풀어서 해석하면 문서 객체 모델인데, html, head, body와 같은 태그들을 JS가 메모리에 보관하고 이용할 수 있는 객체인 것이다.
간단히 말해서 DOM은 HTML와 스크립트 언어를 서로 이어주는 역할을 하게 되는 것이다.
JS는 HTML 태그들에게 Document라는 전역 객체를 통하여 접근해 조종한다. window라는 객체는 Document라는 전역 객체 상위에 위치해 있다.
보통 본인은 HTML 이나 React 작업을 시작하기 전, 페이지의 DOM 트리 구조를 그려 본 후에 시작한다. 그렇게 하면 좀 더 체계적이고 깔끔한 작업을 할 수 있기 때문이다.

---

Virtual DOM이란?

간단히 말하자면, 실제 DOM의 가벼운 사본과 같은 개념이라고 생각하면 된다.
Virtual DOM을 사용하면, 화면에 변화가 있을 때마다 실시간으로 DOM 트리를 수정하지 않고, 변경사항이 모두 반영된 Virtual DOM을 생성하여 한 번만 DOM 수정을 하게 된다. 이렇게 되면 결과적으로 브라우저는 렌더링을 한 번만 하면 되며, 불필요한 렌더링 횟수를 줄일 수 있게 된다.
보통 React에서 사용하는데, React에서 Virtual DOM을 반영하는 절차는 아래와 같다.

1. 데이터 업데이트 -> 전체 UI를 Virtual DOM에 리렌더링
2. 이전의 Virtual DOM의 내용과 현재의 내용끼리 비교
3. 변경된 부분만 실제 DOM에 렌더링

사실, Virtual DOM을 통해 처리하는 것은 실제 DOM을 사용하는 것보다 더 빠른 편은 아니다. 개발자가 작업을 보다 쉽게 할 수 있도록 도움을 주는 것이라고 보면 되겠다.

Virtual DOM의 등장 이유

이미 기존의 DOM이 있는데 왜 Virtual DOM이라는 것이 생겨나게 된 것일까?
데이터를 표현하는 요소들이 많아질 수록, 기존의 DOM 같은 경우에는 렌더링이 일어나는 과정에 소요되는 시간이 길어진다. 웹 브라우저가 다시 document 객체들을 훑고, CSS를 연산하고, 레이아웃을 구성하고 하는 등의 과정들이 다시 일어나야 하기 때문이다. 이러한 상황으로 속도적인 부분과 과정에서 생기는 버그, 브라우저가 죽는 등의 일들을 개선하기 위해서 Virtual DOM이 나타난 것이다.

 

• DOM을 사용하는 경우
  1. 10개의 노드를 하나씩 수정
  2. 10번의 렌더링 발생
• Virtual DOM을 사용하는 경우
  1. 10개의 노드를 하나씩 수정
  2. Virtual DOM끼리 비교하며 변경 사항을 Virtual DOM에 10번 리렌더링
  3. 실제 DOM에 렌더링

여기서 렌더링이란? DOM 트리를 생성한 후, 렌더 트리를 생성하고 화면에 표시하는 과정을 말한다. 그렇다면 리렌더링은? 데이터가 업데이트되면 이전에 생성한 정보와 변경된 정보를 비교하여 최소한의 연산으로 DOM 트리를 업데이트하여 바뀐 요소만 DOM에 반영하는 과정을 말한다.

React의 경우, 컴포넌트를 이용하여 변경된 부분만 새로운 컴포넌트로 수정해 주는 것이 리렌더링 과정이라고 할 수 있다. 일반 DOM을 사용하는 렌더링 과정에 비하여 DOM 트리와 렌더 트리를 생성하지 않아도 되는 것이다.

확실히 직접 DOM을 제어하는 것보다 느릴 수 있지만, SPA와 같은 비동기적 서비스를 효율적으로 관리할 수 있는 기능이라고 볼 수 있다.

Virtual DOM을 사용할 때, 최적화 작업과 같은 유지 보수를 제대로 해 주지 않는다면 성능적으로 좋지 않은 결과를 가져올 수 있다. 효율적인 코드로 작성한 DOM을 직접 제어하는 것이 더욱 좋은 결과를 얻을 수도 있는 것이다. 그렇기에 상황에 따라 어떤 DOM을 사용하여 제어할 것인지 결정하는 것이 중요하겠다.

 

참고

- https://moonsbeen.tistory.com/255

- https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

- https://dev-cini.tistory.com/10