React에서 virtual dom을 쓰는 이유

Virtual DOM이란

 React는 UI 라이브러리로, 화면을 구성하는 방식에서 명령형이 아닌 선언형 방식을 채택했다. 선언형 방식은 개발자가 어떻게 화면을 업데이트할지 일일이 신경 쓰지 않고, 무엇을 그릴지를 선언하는 데 집중한다. 여기서 중요한 역할을 하는 것이 바로 Virtual DOM(Virtual Document Object Model, VDOM)이다. VDOM은 실제 DOM을 추상화하여 메모리에 저장하는 복사본으로, 리액트가 최적화된 상태 업데이트를 수행할 수 있도록 돕는다. 이 글에서 말하는 vdom은 이하로 react의 vdom만을 가르킨다. 

VDOM을 사용하는 이유: 선언적 UI와 멱등성

 리액트가 VDOM을 도입한 주된 이유는 선언적 UI와 멱등성(idempotency) 때문이다. 명령형으로 DOM을 직접 조작하던 과거 방식과 달리, 리액트는 VDOM을 통해 더 이상 개발자가 DOM 변경 과정을 직접 다루지 않아도 된다. 이 선언적 특성 덕분에 개발자는 UI가 특정 상태에 도달하는 “과정”이 아닌 “결과”만을 신경 쓰면 된다.

 

멱등성은 같은 입력을 넣었을 때 항상 같은 결과가 나오는 속성을 말한다. 리액트는 VDOM을 사용함으로써 UI를 그리는 과정을 멱등적으로 만들 수 있었다. 즉, 어떤 상태에서든 동일한 UI가 일관되게 렌더링된다. 이 덕분에 상태 관리와 동기화 이슈가 줄어들어 예측 가능하고 안정적인 UI를 만들 수 있게 되었다. 

VDOM: 성능이 아닌 개발 경험의 개선

 많은 사람들이 리액트에서 VDOM을 사용하는 이유가 퍼포먼스 최적화라고 생각할 수 있지만, 사실 리액트 팀이 VDOM을 도입한 주된 계기는 성능이 아니라 상태 동기화 문제 때문이었다. 페이스북이 리액트를 처음 개발하게 된 배경을 보면, 당시 페이스북 메시지 알림이 동기화되지 않는 문제가 있었다. 이를 해결하기 위해 리액트가 탄생했고, VDOM은 그 문제 해결의 중요한 열쇠였다. 

 

 VDOM을 사용하면 상태가 바뀔 때마다 개발자가 직접 DOM을 어떻게 수정해야 할지 고민할 필요가 없다. 대신 리액트는 상태 변화에 따라 VDOM을 업데이트하고, 이를 실제 DOM과 비교(diffing)한 후 필요한 부분만 갱신해준다. 이 과정에서 개발자는 더 이상 복잡한 DOM 업데이트 로직을 작성할 필요가 없어졌다. 결과적으로 리액트는 개발자가 상태 변화를 간편하게 처리할 수 있게 해주는 라이브러리로 자리 잡았다.

VDOM의 성능

 리액트가 VDOM을 사용함으로써 성능 면에서 더 뛰어난 것은 아니다. 사실 대부분의 상황에선 실제 Dom을 조작하는 것이 더 빠르다. 스벨트(Svelte) 팀의 블로그 글 “Virtual DOM is pure overhead“에서도 VDOM은 실제 DOM을 조작하는 것보다 더 빠르지 않다 오히려 overhead로 작용한다고 주장하고 있다. 왜냐하면 react의 diffing 알고리즘의 시간이 꽤나 오래 걸리기 때문이다. react팀도 이를 개선하기 위해 fiber를 17부터 도입한 것을 보면 virtual dom이 무조건 빠르다고 보긴 어려울 것 같다.

 

 그러나 특정 상황에서는 Virtual dom이 더 빠를수도 있다. 특히 DOM 조작에서 성능 저하가 발생하는 주요 이유인 reflow와 repaint가 많이 발생하는 상황일 경우에 그러하다. 리액트는 이런 문제를 해결하기 위해 상태 변경이 여러 번 발생하더라도 이를 batching을 통해 한 번에 처리할 수 있는 메커니즘을 제공한다. 리액트 개발 팀의 영상인 "Introduction to React.js"영상에서 밝힌 것처럼, 자바스크립트 자체는 매우 빠르지만 DOM 조작이 느리기 때문에 이를 최소화하는 것이 중요하다. 따라서 VDOM을 사용함으로써 상태 변경이 있을 때마다 DOM을 바로 조작하지 않고, 모아서 업데이트 하는등 성능 최적화를 달성한다.

결론

 결국 리액트에서 VDOM을 사용하는 주된 이유는 성능 최적화가 아니라 개발자 경험의 개선이다. 리액트는 VDOM을 통해 UI 업데이트 과정을 선언적이고 멱등적으로 만들었고, 이는 개발자가 더 이상 상태 변화를 직접 관리하지 않아도 되는 환경을 만들어준다. 결과적으로 리액트는 성능뿐만 아니라 유지보수성과 코드 가독성에서도 큰 이점을 제공하며, 이는 VDOM이 단순한 성능 향상 도구 이상의 가치를 지니고 있음을 보여준다.

 

Reference

• Harris, R. (2019, May 21). Virtual DOM is pure overhead. Svelte Blog. https://svelte.dev/blog/virtual-dom-is-pure-overhead

• Meta Developers. (2013, July 9). Introduction to React.js | Meta Developers [Video]. YouTube. https://www.youtube.com/watch?v=XxVg_s8xAms&t=3245s

• Meta Developers. (2017, March 13). Introduction to React.js for Beginners [Video]. YouTube. https://www.youtube.com/watch?v=ZCuYPiUIONs&t=1675s