리액트의 가상 DOM과 진짜 DOM: 과연 DOM이 느린 걸까?

DOM이 느리다? 그게 정말일까?

 

흔히 “DOM 조작은 느리다”라고 하는데, 사실은 조금 달라요. DOM 자체가 느린 건 아니지만, 복잡한 업데이트를 반복해서 할 때 성능이 떨어질 수 있어요. 예를 들어, 화면에서 여러 요소를 한꺼번에 계속해서 바꾸는 상황이 발생하면, 브라우저가 DOM 트리를 계속 갱신해야 해서 부담이 커지죠.

 

리액트는 이런 부담을 줄이기 위해 가상 DOM(Virtual DOM)을 사용해요. 가상 DOM은 메모리 상에서 HTML의 “사본”을 만들어 놓고, 이걸 먼저 업데이트하면서 변경 사항을 파악해 필요한 부분만 실제 DOM에 반영합니다.

---

리액트의 목표: 지속적으로 변화하는 데이터와 대규모 애플리케이션을 위한 최적화

 

리액트가 가상 DOM을 쓰는 이유는 바로 “대규모 애플리케이션”에서 성능을 유지하면서 지속적으로 변화하는 데이터를 효과적으로 처리하기 위해서예요. 사용자가 많고, 화면 요소가 실시간으로 업데이트되는 애플리케이션에서는 리액트가 진가를 발휘하죠. 가상 DOM을 통해 업데이트가 필요한 부분만 조작해서 브라우저의 부담을 최소화해요.

---

리액트의 가상 DOM 업데이트 절차: 실제 DOM을 만지기 전에!

 

1. 가상 DOM에서 먼저 업데이트

상태나 데이터가 바뀌면 리액트는 가상 DOM에서 새 트리를 생성해, 기존 트리와 비교할 준비를 해요.

2. 변화 감지 (Diffing)

새로운 가상 DOM과 기존 가상 DOM을 비교해 변경된 부분만 추려내는 작업을 합니다. 이 과정을 통해 업데이트가 필요한 요소를 찾아내고, 불필요한 업데이트는 건너뛰어요.

3. 필요한 부분만 실제 DOM에 반영 (Reconciliation)

리액트는 이 비교 과정(Diffing)을 마치고 나면, 진짜 DOM에서 변경이 필요한 부분에만 반영합니다. 예를 들어, 카운터가 증가할 때 전체 DOM을 바꾸는 게 아니라, 그 숫자 부분만 쏙쏙 바꾸는 식으로 효율성을 챙기는 거죠.

 

---

 

 

리액트의 진가가 발휘되는 순간들

 

리액트는 대규모 애플리케이션에서 정말로 빛이 나요. 가상 DOM이 변경된 부분만 업데이트하면서 성능을 최적화해 주기 때문에, 데이터가 자주 바뀌는 실시간 대화형 앱이나 UI 요소가 많고 복잡한 대규모 웹앱에서 훨씬 효율적이죠.

 

그런데… 작업이 너무 간단하면 리액트가 더 느릴 수도?

 

사실 리액트는 가상 DOM을 통해서만 진짜 DOM을 만지기 때문에, 업데이트가 아주 간단한 작업이라면 리액트가 오히려 느릴 수 있어요. 왜냐면 가상 DOM과의 비교 작업(Diffing)이 추가되기 때문이죠. 예를 들어, 버튼 하나만 바꿔야 하는데 굳이 가상 DOM을 거쳐야 하니까요!

 

 

리액트는 작고 간단한 앱보다는 규모가 크고, 여러 데이터가 빠르게 변하는 환경에서 제 성능을 발휘하는, 그런 “중요한 상황에 강한” 라이브러리라고 보면 좋습니다.