리액트(React)는 가상돔(Virtual DOM)을 이용하는 대표적인 javascript 라이브러리이다.
자체적으로 상당히 효율적인 알고리즘을 사용해서 우리가 원하는 페이지를 브라우저에 빠르게 그려줄 수 있고, 이는 리액트가 수많은 개발자들 사이에서 사랑을 받는 이유 중 하나일 것이다.
가상돔에 대해 설명하기에 앞서, DOM에 대한 이야기를 먼저 해보고자 한다.
DOM(Document Object Model)
한눈에 이해하기 쉽게 이미지로 정리해보았다.
우리는 브라우저를 통해 수많은 컴포넌트로 구성된 웹페이지들을 보게 되는데 그 페이지를 문서(Document)라고 하고, 그 하나하나의 HTML 요소들을 엘리먼트(element)라고 한다.
그리고 DOM은 Document를 구성하고 있는 element의 구조이며 이를 시각화 한 것이 DOM TREE!
트리의 요소 하나하나를 노드(node)라고 부르며, 각각의 노드는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API (ex. getElementByID(), appendChide() 등)를 제공한다.
Virtual DOM
그렇다면 가상돔(Virtual DOM)은 무엇일까?
일단 예시를 먼저 하나 들어보겠다.
인스타그램에서 좋아요 버튼을 누르게 되면, 화면이 바뀌어야 한다. 빨간색 하트에 해당하는 DOM 요소가 갱신되어야 하는 것이다.
따라서 브라우저는 HTML을 탐색해 해당 Element를 찾고, 그 요소의 속성이나 스타일을 업데이트한다. 이후 CSS는 해당 요소와 관련된 부분의 레이아웃을 다시 계산하게 될 것이다.
해당 부분만 두고 봤을 때는 퍼포먼스적으로 크게 무리가 있는 작업은 아니지만, 이를 반복적으로 수행한다면 충분히 무거워질 수 있는 작업이 되는 것이다.
그리고 DOM은 계층 구조로 이루어져 있기에, 특정 요소를 변경할 때 브라우저가 DOM 트리 전체를 탐색해야 하는 경우가 발생할 수도 있다.
이에 따라 등장한 개념이 바로 Virtual DOM인 것이다.
Virtual DOM은 실제 DOM의 복사본처럼 동일한 구조를 담고 있다. 하지만 이는 실제 DOM이 아닌 Javascript 객체 형태로 메모리에 저장되므로, 실제 DOM을 조작하는 것보다 훨씬 더 빠르게 조작을 수행할 수 있다.
리액트는 항상 2가지 버전의 Virtual DOM을 가지고 있다.
- 화면이 갱신(렌더링)되기 전 구조가 담겨있는 Virtual DOM
- 화면 갱신(렌더링) 후 보여야 할 Virtual DOM
리액트는 state가 변경될 때마다 Re-Rendering이 발생하는데, 그 시점마다 새로운 내용이 담긴 Virtual DOM을 생성하게 된다.
state가 변경되면 새로운 내용이 담긴 2번 Virtual DOM 과 기존의 1번 Virtual DOM 을 비교하여 어떤 Element가 변했는지 비교한다. 이 과정을 리액트에선 Diffing이라고 표현한다.
따라서 차이가 발생한 부분만을 실제 DOM에 적용하게 되는 것이다.
이 과정을 Reconciliation(재조정)이라고 한다. 해당 과정에서 리액트는 Batch update를 사용해 필요한 변경 사항을 한 번에 처리하여 매우 빠르고 효율적으로 적용시킨다. 변경된 요소를 하나하나 반복적으로 적용하지 않고, 모든 변경 사항을 집단화해 한 번에 DOM 에 반영하는 것이다.
결론적으로, Virtual DOM은 기존 DOM의 한계를 보완하여 웹 애플리케이션이 더 빠르고 효율적으로 작동할 수 있게 해주는 중요한 기술이라 할 수 있다. 실제로 React의 강점을 얘기할 때, 거의 첫 번째로 거론되는 개념이니(튜터님피셜) 꼼꼼하게 공부해두면 큰 도움이 될 것 같다.
