Virtual DOM 때문에 React를 사용할까?

간혹 프론트엔드 개발자 분들에게 React를 왜 사용하는지 물어보면 "Virtual DOM을 사용하여 빠르게 렌더링이 가능하기 때문에 사용합니다" 라고 말씀하시는 분들이 있습니다. 일반적으로 사용자 인터렉션이 많고, 자주 렌더링이되는 애플리케이션의 경우 DOM보다 빠를 수 있지만, Virtual DOM과 DOM 각각 장단점이 있어 어떤게 빠르다 비교할 수는 없다고 생각합니다.

 

우선, Virtual DOM이 어떤 개념인지 먼저 살펴보겠습니다. 

 

Virtual DOM 이란?

Virtual DOM 혹은 가상 돔이라고 하는 기술은 React와 Vue와 같은 라이브러리 혹은 프레임워크에서 사용합니다. 이름에서도 알 수 있듯이, 실제 DOM을 대신해서 메모리 상에서 DOM을 가상으로 만들어 관리하는 방식입니다.

메모리 상의 가상화된 DOM을 만들어 따로 관리하는 이유는 효율적인 렌더링을 하기 위함입니다. 일반적으로 DOM 조작은 비용이 큰 편이기 때문에 자주 변경이 발생하는 SPA(Single Page Application) 환경에서 사용하기 좋습니다. (물론 Virtual DOM이 SPA에서 항상 효율적이라는 말은 아닙니다)

 

Virtual DOM 동작 방식

그렇다면 왜 효율적으로 렌더링을 할 수 있을까요? 동작 방식에 대해 살펴봅시다.

1. 상태(State)가 변경되면, Virtual DOM에 변경된 상태에 따른 DOM 구조를 생성합니다.
2. 이전 Virtual DOM과 새롭게 생성된 Virtual DOM을 비교(diffing)하여 달라진 부분을 계산합니다.
3. 달라진 부분만 실제 DOM에 적용(Patch)하여, 전체 UI를 다시 렌더링 하는 것이 아니라 변경된 부분만 렌더링을 합니다.

위 동작방식과 같이 변경된 부분만 효율적으로 업데이트 할 수 있습니다.

 

하지만, Virtual DOM에도 단점이 있는데 상태 변경에 따라 Virtual DOM을 생성하고, 기존 Virtual DOM과 비교(diffing)하는 과정에서 비용이 들어갑니다. 매우 심플한 애플리케이션에서는 오히려 일반 DOM보다 성능 저하가 발생할 수도 있습니다.

 

그럼 언제 Virtual DOM을 사용하는게 좋은것이냐? 라고 물으시면, 상태가 자주 변경이되고 규모가 큰 SPA 프로젝트의 경우에는 효과적으로 사용할 수 있습니다.

 

React를 왜 사용할까?

그렇다면 상황에 따라 Virtual DOM이 좋거나 DOM이 좋을 수도 있습니다. React를 사용하는 이유에 대해 얘기할 때는 Virtual DOM은 사실 중요하지 않은 것 같습니다.

 

React가 정말 사랑받는 이유는 아래와 같은 이유가 있어서라고 생각합니다.

선언적 UI

React는 상태를 기반으로 UI 를 그리는 선언적 프로그래밍 방식을 사용합니다. 프론트엔드 개발자는 "어떤 상태 일 때 어떤 UI를 보여주지"에 대해 집중해서 프로그래밍을 할 수 있습니다. 쉽게 말하면 상태가 업데이트 됨에 따라 수동으로 DOM을 조작하지 않아도 되기 때문에, "어떻게 렌더링"을 할지 고민할 필요가 없습니다.

 

재사용 가능한 컴포넌트와 훅

웹 개발을 하다보면 동일한 컴포넌트를 반복적으로 개발하는 경우가 많습니다. React는 이렇게 재사용성이 높은 컴포넌트를 따로 분리하고 모듈화하여 개발 생산성을 높일 수 있습니다. (예를들어, 버튼, Input, Modal, Card 등의 UI 요소가 있습니다) 이렇게 공통 모듈로 나눠 관리하면, 대규모 프로젝트에서 특히 관리하기 편하고 협업도 용이합니다. 컴포넌트 말고도 hook을 이용하면 상태 혹은 로직을 재사용할 수 있습니다

 

방대한 커뮤니티, 생태계

React는 Meta(구 Facebook)에서 개발하고 관리하고 있으며, 이미 많은 개발자들과 기업이 사용하고 있습니다. 그만큼 많은 커뮤니티 사이트가 있어 상대적으로 문제 발생시 해결하기가 쉽고, 다양한 라이브러리(react-router-dom, redux, react query 등)가 존재하여 쉽고 빠르게 개발할 수 있습니다.

 

위 내용말고도 많은 장점이 있습니다. 누군가 React를 왜 사용하냐고 물어보면, 위와 같은 내용을 장점을 말씀하시는게 효과적일 것 같습니다. Virtual DOM은 단순히 효과적으로 렌더링을 하기 위한 React의 내부 구현 중 하나 일 뿐이니깐요.