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