[ React ] React의 Virtual DOM

꾸개·2024년 4월 19일

React

목록 보기

2/9

개요

개발자들이 가장 많이 사용하는 라이브러리인 React는 빠른 렌더링이 특징이다. 여기서 빠른 렌더링이란, 규모가 작은 프로젝트보다 큰 프로젝트일 경우 체감이 더 잘 된다.

그 이유는, 리액트는 자바스크립트의 기존 렌더링 방식과 다른 렌더링 방식을 사용하고 있기 때문인데, 기존 방식과 어떻게 다른지 파악해보도록 하겠다.

렌더링

일단 렌더링이란 무엇일까? 우리가 사용하고 있는 브라우저는 보통 두개의 엔진이 들어가있는데 하나는 렌더링 엔진 하나는 자바스크립트 엔진이 있다. 여기서 렌더링 엔진은 페이지를 그려내어 이용자에게 보여주는 역할을 한다. 즉, 렌더링이란 렌더링 엔진이 페이지를 그려내는 것을 뜻한다.

렌더링 엔진은 HTML,CSS,Javascript를 파싱하여 브라우저가 이해할 수 있는 구조로 구상하여 메모리에 적재하고, 그 정보들을 바탕으로 화면을 그려낸다. 이 과정중에 과정중에 HTML을 파싱하는 과정에서 생성되는 것이 DOM(Document Object Model)이다.

DOM

DOM이란, 렌더링 엔진이 HTML을 구조화하고, 트리형식으로 구성한 것을 말한다. 이 과정 후 부모와 자식, 즉, 상속과정이 파악되어 그에따른 CSS 스타일링, 자바스크립트의 suedo selector가 동작한다.

DOM tree(https://poiemaweb.com/js-dom)

이 때, 사용자 인터랙션이나 데이터의 변경은 화면에 새로운 콘텐츠를 렌더링하는 과정을 요구하게 되는데, 이 경우 DOM을 전체 재렌더링 하게 될 수도 있다. 현대의 웹 페이지들은 보통 동적 웹페이지와 인터랙션과 트랜지션이 많이 이루어지기 때문에, 해당 기능들이 많을수록 재렌더링으로 인한 성능저하는 불가피 할 수 있다.

Virtual DOM(가상 DOM)

앞서 살펴본 바와 같이 DOM은 적은 변경사항이어도 페이지 전체를 재렌더링 하기 때문에 렌더링이 느려질 수 있다. 하지만, React는 이러한 단점을 회피하기 위해 Virtual DOM을 사용한다.

Virtaul DOM이란, 말 그대로 가상의 DOM을 참고하고 변동사항이 있는곳만 다시 렌더링하는 시스템을 말한다.

Virtual DOM을 사용하면 실제 DOM에 접근하며 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교 한뒤 최소한의 내용만 반영하여 성능 향상을 이끌어낸다. DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경 있을 경우 해당 변경 사항만 반영하는 것이다.

인터페이스의 변화가 감지되면 먼저 Virtual DOM으로 렌더링한다. 이 작업은 실제 화면에 보이지 않는다.
현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다. 이 과정을 diffing이라고 한다.
변경된 부분을 실제 DOM에 반영한다.

Virtaul DOM과 DOM 렌더링 차이(https://coding-medic.com/2020/11/10/the-virtual-dom/)

단점

이렇게 성능 향상을 도와주는데, 그렇다면 모든 프로젝트에는 Virtual DOM을 사용해야할까? 그렇지 않다. 완벽해 보이는 Virtual DOM도 단점이 존재한다.

1. 메모리 추가 사용

메모리 상에 DOM과 동일한 구조를 유지해야 하기 때문에 추가적인 메모리를 사용해야 한다.

2. 복잡한 상태관리

대규모 프로젝트, 애플리케이션은 상태 관리가 복잡해질 우려가 있다. 이는 개발의 복잡성을 높일 수 있다.

3. 오버헤드 가능성

모든 변경사항이 Virtual DOM을 거치기 때문에 간단한 UI 업데이트도 계산비용이 커서 오버헤드를 발생시켜 성능을 오히려 저하시킬 수 있다.

4. 초기 렌더링 성능

첫 번째 렌더링 시 실제 DOM과 Virtual DOM 모두를 구축해야하기 때문에 특히 초기 로딩 시에 성능 저하를 일으킬 수 있다.

면접에서 말하기

Virtual DOM은 규모가 큰 프로젝트나 SPA (Single Page Applications)에 적합한 렌더링 최적화 기술입니다.

전통적인 DOM 조작 방식에서는 사용자 인터페이스(UI)나 데이터의 변화가 감지될 때 전체 페이지를 재렌더링하며, 이는 DOM을 전체적으로 재생성하는 과정을 포함합니다. 이 과정은 브라우저의 렌더링 엔진에 상당한 부하를 줄 수 있습니다.

반면, Virtual DOM은 기존 DOM과는 독립적으로 메모리 상에서 렌더링을 수행합니다. 변화가 발생하면, 새로운 Virtual DOM이 생성되고 이전의 Virtual DOM과 비교를 통해 변경된 부분만을 식별합니다. 식별된 변경사항만이 실제 DOM에 반영되므로, 불필요한 DOM 조작이 최소화되고 결과적으로 전체적인 성능이 향상됩니다."