🔎 가상 돔이라는 것을 많이 들어보았지만 정확한 의미와 원리를 알지 못했는데 전에 다뤘던 React-redux 글을 작성하다가 가상 돔에 대해서도 작성해봐야겠다는 생각이 들었다. 그럼 Virtual DOM에 대해서 알아보자.
📌 가상 돔, Virtual DOM이란?
React의 장점 중에는 Virtual DOM이 있다.
Virtual은 말 그대로 '가상'이라는 뜻이고, DOM은 Document Object Model의 약자로 문서 객체 모델이다. 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미한다. 개발을 하면서 자주 보게 되는 div, input, a 등이 DOM에 해당한다.
DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할이다.
HTML/CSS ↔ DOM ↔ JavaScript
DOM이 존재하기 때문에 Javascript는 HTML태그들을 수정할 수 있는 것이다.
가상 DOM을 사용하는 이유
React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어진다.
하지만, 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁다.
때문에, React에서는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다.
즉, Virtual DOM은 DOM의 요약본이라고 할 수 있다.
그렇다면, DOM이 느린가?
라고 생각할 수 있지만 아니다.
요소 개수가 몇 백 개, 몇 천 개 단위로 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈가 조금씩 발생한다. 즉, 느려진다는 것인데 항상 그런 것은 아니다.
DOM 자체는 빠르다. 읽고 쓸 때의 성능은 Javascript 객체를 처리할 때의 성능과 비교하여 다르지 않다.
★단, 웹 브라우저 단에서 DOM 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 재구성, 즉 렌더링이 일어나는 과정에서 시간이 허비된다는 것이다.
★또한, 이 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있고, DOM이 추가, 삭제 혹은 태그 위치가 변하는 경우 렌더링이 일어난다.
렌더링 : 브라우저 로딩 과정 중 스타일 이후의 과정 (스타일 → 레이아웃 → 페인트 → 합성) 을 렌더링이라고 한다.
React가 Virtual DOM을 반영하는 절차
특정 페이지에서 데이터가 변했다고 가정했을 경우,
리액트를 이용해 돔을 업데이트 시키는 절차를 알아보자.
- 데이터가 업데이트 → 전체 UI를 Virtual DOM에 리렌더링 함
- 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔끼리 비교)
- 바뀐 부분만 실제 DOM에 적용됨 (컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이루어짐)
📌 결론
작은 규모의 레이아웃 변경이 여러분 발생하는 것보다 큰 규모의 레이아웃이 한번 발생하는 것은 성능 상의 차이가 크다.
React는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끈 것이다.
