사람들에게 왜 React를 쓰는지 장점을 물어보면 흔히 들리는 답변이 있습니다.

React는 Virtual DOM을 써서 빠르다

Virtual DOM(VDOM)은 확실히 빠릅니다. 그런데, 도대체 무엇에 비해 빠르단 것일까요?

Virtaul DOM은 Real DOM보다 가볍고 빠르다

맞는 말이긴 한데, 살짝 이상합니다. Virtual DOM을 쓰더라도, 결국 변경사항을 웹페이지에 적용하려면 Real DOM을 쓰긴 해야합니다.

이를 이해하기 위해서는 우선 React가 반응성, 즉 상태가 변할때 리렌더링을 어떻게 하는지를 이해해야 합니다.

React의 반응성 (Reactivity)

React는 다소 무식한 접근법을 쓰고 있는데요, 바로 "상태가 변하면 그냥 처음부터 싹 다 다시 그리자" 입니다.

React는 설계상 특정 상태가 변했을 때 영향을 받는 부분이 어디인지를 알기 어렵기 때문에, 그냥 모든 부분을 새로 그리는 것입니다.

이 과정에서 useMemo, memo등 최적화가 들어가긴 하지만, 어디까지나 최악의 상황을 피하기 위한 차선책에 불과합니다.

Virtual DOM

만약 VDOM이 없었다면 어떨까요?

우리가 setState를 호출할 때마다, 모든 자식 컴포넌트를 나타내는 DOM Element가 처음부터 다시 생성되고 브라우저 엔진에 의해 렌더링 될 것입니다.

얼핏 생각해도 상태가 변할때마다 Real DOM을 통해 모든 DOM을 새로 생성하는것은 심각하게 비효율적입니다.

처음부터 다시 그리긴 하는데 Real DOM을 쓰기엔 너무 부담스러우니 좀 더 가벼운 버전을 쓰자고 나온 개념이 VDOM 입니다.

그렇게 해서 VDOM tree의 현재 버전과 이전 버전을 비교하여, 변경사항이 있는 부분만 Real DOM을 통해 반영하는 과정이 흔히 말하는 재조정 (Reconciliation) 입니다.

결론

• VDOM을 사용해 생기는 오버헤드 : +A
  • 흔히 말하는 Reconciliation (변경사항 diff)
• VDOM을 사용해 줄어드는 오버헤드 : -B
  • 불필요한 Real DOM 조작

Virtual DOM이 빠르다고 하는 이유는, VDOM을 통해 줄어드는 오버헤드(B)가 VDOM으로 인해 생기는 오버헤드(A)보다 압도적으로 크기 때문입니다.

Virtual DOM자체는 오버헤드가 있지만, 불필요한 Real DOM 조작을 최소화 하여 전체적인 오버헤드는 줄어든다.