리액트 사용하면서 가상돔에 대한 기초적인 부분을 들었던 것 같은데.. 생각해보려고 하면 잘 떠오르지 않아 글을 적으면서 이해를 해야겠다는 생각을 했다. 가상 돔(Virtual DOM)에 대해 한번 알아보즈아!
DOM 이란?
먼저 가상 돔을 알아보기 전에 DOM에 대해 알아보고 가보자.
- Document Object Model
웹 페이지에 접속하면 보이는 모든 요소들 버튼, 이미지, 텍스트 등등의 모든 요소들을 담고 있는 것이 바로Document이다.
브라우저는 화면에 보이는html을 분석하여 화면에 띄워준다.
DOM은html내부에 있는 요소들을 트리 구조로 표현한 것이다.
DOM 트리 안에는 각각의 요소에 상응하는 노드가 들어있는데, DOM에서 제공하는 API를 통해 DOM구조에 접근하여 조작할 수 있다.
자바스크립트의 예를 들면 getElementById() 또는 querySelector()등을 통해 돔 구조 안의 요소에 접근하여 조작할 수 있는 것을 말한다.
DOM 조작 과정
웹 페이지 상에서 화면에 보여지는 부분이 변경되어야 할 때 DOM을 조작해서 변경이 이루어진다. 단순히 텍스트의 색상을 변경해야 할 때에도 일련의 과정이 실행되는데 다음과 같다.
- 브라우저가 현재 페이지의
html을 탐색하여 변경 될 요소를 찾는다. - 해당 요소와 안에 있는 자식 요소까지
DOM에서 제거한다. - 새롭게 수정 된 요소들로 교체한다.
CSS를 다시 계산하고, 레이아웃을 정보를 수정한다.- 브라우저에 다시 그려준다.
많은 작업이 있는 것 같지만 빠른 알고리즘을 통해 트리의 구조를 효율적으로 업데이트를 시켜주기에 보통의 경우 문제가 없다. 하지만 화면의 변경 사항이 많아질수록 새롭게 요소를 그려주는 작업은 시간의 소요가 많아진다.
화면에서의 변화가 5개가 된다고 치면 일련의 과정을 5번이나 거쳐야하기 때문이다.
가상 돔이란? (Virtual DOM)
Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념입니다. <React 공식 문서>
가상 돔이란 실제 DOM과 같은 내용을 담은 복사본이라 생각하면 된다. 이 가상 돔은 자바스크립트 객체의 형태로 메모리 안에 저장되어 있으며 Class, style 등의 속성은 갖고 있지만 화면에 변화를 줄 수 있는 DOM API Method는 갖고 있지 않다.
가상 돔을 이용한 DOM 조작 과정
가상 돔은 실제 브라우저에 접근하는 것이 아닌 메모리에 저장되어 있는 자바스크립트 객체이기에 가상 돔을 생성하고 접근하는 것은 아주 가볍고 빠른 동작이다. 리액트는 이 가상 돔을 이용하여 DOM의 비효율적인 조작 과정의 시간을 아주 빠르게 단축시켜 준다.
리액트의 가상 돔을 이용한 DOM 조작 과정
리액트는 항상 2개의 가상 돔을 갖고 있다.
- 렌더링 이전 화면 구조를 담은 객체의 가상 돔(1)
- 렌더링 이후에 보이게 될 화면 구조를 담은 가상 돔(2)
state변경과 같이 렌더링이 발생 할 상황이 놓일 때 마다 가상 돔을 생성한다
이렇게 두 개의 가상돔을 가지고 비교하여 정확히 어느 요소가 변경된 것인지 찾아내는데 이것을 Diffing이라고 부른다.
Diffing은 효율적인 알고리즘으로 진행되기에 빠른 속도로 바뀐 요소들을 파악할 수 있다.
이렇게 바뀌는 요소만 찾아내어 실제 브라우저에 적용시켜주는데 이 때 Batch Update로 진행되어 굉장히 효율적으로 이루어진다.
이 동작들을 Reconciliation이라고 하며 재조정이라고 말한다.
Batch Update
- 변경 된 모든 요소들을 집단으로 실제
DOM에 한 번에 적용시켜주는 것을 말한다.
🧐 끝으로..
리액트를 사용해보기 전에 들었던 가상 돔은 이해가 되지 않았는데 리액트를 사용해보고, 브라우저 렌더링 과정에 대한 부분도 공부해보고 다시 들어보니 이해하기가 좀 더 수월했다.
생각해보면 리액트에선 바뀐 부분만 화면에 적용된다는 것은 알고있었지만 왜 그런지는 잘 몰랐는데.. 바로 이 가상 돔 때문인 것을 알게되었다!
리액트는 알면 알수록 재미있는 것 같다.
.
.
.
.
.
.
.
참고 사이트
[YouTube - 별코딩] - React의 가상돔
[momo] - Virtual DOM 핵심정리
[10분 테코톡] - 돔하디의 Virtual DOM
