우리가 리액트를 사용하면서 리액트가 왜 빠르게 페이지를 브라우져에 그려주는지에 대해 많이 이야기하는데
그때 그 이유를 "리액트는 Virtual Dom을 사용하기 때문이다!" 라고 할 만큼 가상돔의 대한 이해가 중요시해졌습니다.
우선 DOM(Document Object Model)이란?
HTML의 Element 요소 하나하나를 담고 있는 웹페이지를 Document라고 하고, 브라우저는 이 요소들을
분석하여 페이지를 띄워주는 방식으로 작동합니다.
즉, DOM이란 이런 HTML 요소들을 tree형태로 DOM Tree를 구성하여 표현한 것 입니다.
DOM Tree 안에는 각 요소에 상응하는 노드들이 들어있고, 이를 활용해서 개발을 할 때 DOM 구조에 접근하여 원하는 Element들을 조작하여 작업 목적에 따른 개발을 수행하게 됩니다.
예를 들어 `getElementById`, `querySelecter/querySeleterAll`등을 활용하여 특정 요소의 색을 바꾼다던지, 레이아웃을 적용한다던지 등에 작업이 이에 해당하는 것이라고 생각하시면 됩니다.
이렇게 DOM에 대해 간략하게 알아보았고, 이 글에서 다루고자하는 주요 주제인 Virtual DOM에 대해 이야기 해봅시다.
Virtual DOM이란 무엇일까요?
쉽게 말하자면 "실제 DOM과 같은 내용을 가지고 있는 DOM의 복사본이 Virtual Dom이다!" 라고 이해하면 쉽습니다.
하지만 DOM과 달리 복사본인 Virtual DOM은 실제 DOM에 포함되지 않고, Javascript Object 형태를 띄며 메모리 안에
저장되어있습니다.
그렇다면 Virtual DOM 어떻게 효율적으로 DOM 조작이 가능할까요?
리액트는 두가지의 가상돔 객체를 가지고 DOM을 조작하는데
첫번째로는 렌더링 이전 화면 구조를 나타내는 가상돔
두번째는 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔이 있습니다.
리액트가 새로운 가상돔을 생성하는 경우는 상태(State)가 변경될 때마다 Re-Rendering이 발생하는데,
이러한 리렌더링 때마다 새로운 가상돔을 생성하여 브라우저가 그려지는 것 입니다.
렌더링 이전에 화면의 내용을 담고있는 첫번째 가상돔과 업데이트 이후에 발생할 두번째 가상돔을 비교하여 정확히
어떤 Element가 변했는지를 비교하는데 이를 리액트에선 Diffing이라고 합니다.
Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에 어떤 Element에 차이가 있는지를 매우 신속하게 파악할 수 있는 것 입니다.
리액트는 이를 통해 차이가 발생한 부분만을 (브라우저 상의) 실제 DOM에 적용하게 되는데
이 과정을 Reconciliation(재조정)이라고 합니다. 이 과정이 매우 효율적인 이유는 Batch Update때문인데
이는 변경된 모든 Element들을 집단화시켜 이를 한번에 실제 DOM에 적용하는 방식입니다.
브라우저에 화면을 그려주는 작업이 DOM조작에서 가장 비용이 많이 발생하는 지점인 만큼 변경된 Element를 한번에 적용한다면
효율적으로 화면을 그릴 수 있다는 점을 인지하면 조금 더 쉽게 기억에 남을 수 있을 것입니다.