가상 DOM과 실제 DOM의 차이: 정말 성능 향상이 있을까?

들어가며

React는 가상 DOM 개념을 도입하여 DOM 업데이트 성능을 향상시킵니다. 실제 DOM과 비교했을 때, 가상 DOM은 UI의 변화 관리를 좀 더 효율적으로 처리할 수 있도록 돕습니다. 그러나 최근 모던 리액트 딥다이브를 읽고, 이러한 최적화가 항상 빠른 속도를 보장하지는 않는다는 사실을 알게되었습니다. 직접 실험한 결과에서도 큰 차이를 느끼기 어려웠을 정도인데, 과연 가상 DOM과 실제 DOM의 차이는 왜 중요하며, 어떤 상황에서 유용할까요?

 

 

실제 DOM과 가상 DOM의 역할

브라우저의 DOM(Document Object Model)은 화면에 표시되는 최종 결과물입니다. 실제 DOM을 변경할 때마다 브라우저는 이를 렌더링하고, 새로 추가하거나 수정된 요소를 반영합니다. 이러한 과정은 복잡한 트리 구조의 DOM을 여러 번 접근해야 하기에, 이를 효율적으로 관리할 수 있게 해주는 것이 가상 DOM입니다.

 

가상 DOM은 메모리에 존재하는 실제 DOM의 복사본으로, 모든 변경 사항이 브라우저에 바로 반영되지 않고, 메모리에서 가상의 트리에만 반영됩니다. 이를 리액트에서 렌더 단계라고 합니다. React는 상태가 변경될 때마다 가상 DOM을 최신 상태로 유지하고, 실제 DOM에 반영하기 전에 변경된 부분을 diffing 알고리즘을 통해 식별해 최종 변경 사항만을 선택적으로 업데이트합니다. 최종 변경 사항을 업데이트하는 부분이 바로 커밋 단계입니다. 이로써 실제 DOM을 빈번히 조작하는 과정을 줄여 불필요한 재렌더링을 방지하고 성능을 개선할 수 있기에 더 빨라지지 않을까 생각했었는데, 그렇지 않다고하니 직접 한 번 실험을 해보겠습니다.

 

성능 실험: Vanila JS와 React 비교

[1] 대량의 단순 요소 추가 테스트

 

위의 이미지와 같이 단순히 다수의 요소를 한 번에 추가하는 작업의 테스트입니다. Generate Items 버튼을 클릭하면 1만 개의 Item 리스트를 생성하게 만드는 큰 비용의 작업입니다. performance 탭에서 성능 속도를 비교해보겠습니다.

 

vanila.js 결과 / react.js 결과

 

단순히 다수의 요소를 한 번에 추가하는 작업의 경우, vanilla JS가 더 빠른 속도를 보여주었습니다. 이유는 diffing 과정 없이 브라우저의 DOM을 바로 수정하기 때문에 속도가 빠르며, 단순 대량 작업에서는 오히려 가상 DOM을 사용하는 것이 더 느릴 수 있기 때문이라고 합니다. 그럼 언제 DOM이 효율적인 상황이 나타날까요? 가상 DOM의 성능이 진가를 발휘하는 상황은 동적 업데이트가 빈번히 일어나는 복잡한 UI 환경이라고 합니다.

 

예를 들어, 검색창에서 실시간 추천 검색어를 보여주는 경우를 생각해 볼 수 있습니다. 이 작업은 입력할 때마다 전체 DOM이 변하게 되는 복잡한 작업이 됩니다. 반면 가상 DOM을 사용하면 최종 DOM에 대한 변경 사항만을 반영하기 때문에, DOM 자체도 불필요한 업데이트를 피할 수 있습니다. 그래서 이번에는 scroll이 발생할 때마다 state가 변경되는 테스트를 진행해보았습니다.

 

[2] scroll 발생 시 state 변경 테스트

 

이번 테스트는 위의 이미지와 같이 스크롤이 발생할 때마다 count 상태가 변경되는 테스트입니다. performance 탭에서 성능 속도를 비교해보겠습니다.

 

vanila.js 결과 / react.js 결과

 

그러나 이번에도 가상 DOM과 실제 DOM 간의 성능을 비교해본 결과, 눈에 띄는 속도 차이를 확인하기는 어려웠습니다. 결국 실제 DOM에 반영하는 것과, 가상 DOM을 사용해서 메모리에 저장한 후에 반영하는 것의 시간 차이는 사실상 크게 없는데, 이를 성능 향상이라고 말할 수 있는 이유는 무엇일까요?

 

아까 언급했던 input에서 사용자가 입력시에 실시간 검색어 추천을 fetch해 보여주는 예시를 다시 생각해봅시다. 그럴 때, DOM은 계속해서 변하게 될 것이고, 그 과정안의 모든 엘리먼트의 변경 사항을 추적하는 일이 개발자 입장에서는 수고스러운 일이 될 수 있습니다. 뭐가 변했는지, 변하면 안되는게 변했는지 등의 엘리먼트 추적이 모두 개발자의 몫이 되기 때문입니다.

 

결국 개발자에게 중요한 것은 최종 DOM의 변경 사항입니다. 가상 DOM은 렌더링 부분을 따로 관리하고, 마지막에 실제 DOM과 비교해 변경된 부분만 커밋하므로서 UI 관리를 좀 더 효율적으로 처리할 수 있도록 돕습니다. 그러면 불필요한 DOM 업데이트가 줄어들 뿐더러 개발자가 변경 사항을 일일이 추적할 필요가 사라지게 됩니다.

 

결론

가상 DOM과 React Fiber는 UI 성능을 일정 부분 개선합니다. 위와 같은 단순히 많은 요소를 빠르게 추가하거나 제거하는 작업에서는 vanilla JS가 더 나은 성능을 보일 수 있지만, 복잡하고 자주 변하는 동적 UI에서는 가상 DOM과 Fiber의 효율적인 업데이트 방식이 큰 이점을 제공합니다. 특히 최종 변경 사항만을 반영하는 가상 DOM 덕분에 개발자는 불필요한 DOM 업데이트를 줄이고 중요한 업데이트에 집중할 수 있으며, Fiber의 비동기적 작업 중단 기능을 통해 높은 우선순위 작업을 빠르게 반영할 수 있습니다.

 

이러한 이유로, React는 단순히 가상 DOM을 통해 DOM 업데이트 성능을 개선할 뿐만 아니라 Fiber 아키텍처로 효율적인 우선순위 관리 및 비동기적 UI 처리를 가능하게 하여 복잡한 UI를 구현하는 데 강력한 도구가 됩니다.