[React] React의 가상 DOM 작동 방식

React로 프론트엔드 개발을 하다 보면 자주 듣게 되는 단어 중에 가상 DOM(Virtual DOM)이 있는데요.
가상 DOM은 무엇이고, React는 왜 굳이 가상 DOM이라는 걸 쓰고, 어떤 식으로 작동하는 걸까요?

이번 글에서는 최대한 쉽게, 가상 DOM의 작동방식에 대해서 정리해볼까하는데요. 

세 줄 요약 먼저 하고, 하나씩 내용 살펴보겠습니다.

<React에서 가상 DOM 작동방식>

1)React는 상태나 프롭스 변경 시 새로운 가상 DOM을 만들고 기존 가상 DOM과 비교한다

2)변경된 내용만 실제 DOM에 반영한다 

3)이전 가상 DOM을 새로운 가상 DOM으로 교체하여 다음 업데이트 사이클을 준비합니다.

---

DOM이란?

가상 DOM이 뭔지 살펴보기전에 먼저 DOM에 대해서 정리하고 넘어가봅시다.

웹 개발에서 DOM (Document Object Model)은 웹 페이지의 콘텐츠와 구조를 프로그램적으로 접근하고 조작할 수 있도록 해주는 인터페이스입니다. 간단히 말해, 웹 페이지를 구성하는 HTML, XML 문서를 객체(Object)들의 트리(Tree) 구조로 표현한 모델입니다. 바로 이 DOM을 이용해서 javascript가 웹 페이지를 동적으로 조작할 수 있는 건데요. 

 

가상 DOM이란?

가상 DOM은 실제 DOM의 추상화된 버전 또는 가벼운 복사본이라고 생각하면 이해하기 쉽습니다. 웹 개발, 특히 React, Vue.js, Svelte 같은 현대적인 프레임워크에서 성능 최적화를 위해 사용되는 핵심 개념입니다.

실제 DOM을 직접 조작하는 것이 생각보다 비용이 많이 드는 작업이기때문에, 가상 DOM을 활용해서 웹을 효율적으로 렌더링하는거라고 생각하시면 편합니다.

 

 

React에서 가상 DOM 작동 방식

그러면 React에서 가상 DOM 작동 방식을 순서대로 한 번 살펴보겠습니다.

 

1)초기 렌더링

React 컴포넌트가 처음 화면에 나타나면, React는 해당 컴포넌트의 JSX를 기반으로 첫 번째 가상 DOM(Virtual DOM)을 메모리에 생성합니다. 이 가상 DOM의 내용을 바탕으로 실제 DOM(Real DOM)이 브라우저에 그려져 사용자에게 표시됩니다.

2) 상태(State) 또는 프롭스(Props) 변경 시

사용자 상호작용 등으로 인해 컴포넌트의 상태나 프롭스가 변경되면, React는 변경된 정보를 가지고 두 번째 가상 DOM(New Virtual DOM)을 메모리에 새로 생성합니다.

3)Diffing(비교)

React는 첫 번째 가상 DOM과 새로 생성된 두 번째 가상 DOM을 효율적인 알고리즘으로 비교하여 어떤 부분이 실제로 변경되었는지(추가, 삭제, 수정 등)를 정확하게 찾아냅니다.

4)Reconciliation(재조정) 및 가상 DOM 대체

Diffing 과정에서 발견된 최소한의 변경사항들만 취합하여 실제 DOM에 적용(Reconciliation)합니다. 이 과정이 완료되면, 메모리에 있던 첫 번째 가상 DOM은 더 이상 필요 없게 되고, 새로 생성된 두 번째 가상 DOM이 다음 비교를 위한 '기준' 가상 DOM으로 대체됩니다. 즉, 다음 변경이 발생하면 현재의 '두 번째 가상 DOM'이 '첫 번째 가상 DOM'의 역할을 하게 되고, 또 다른 새로운 가상 DOM이 생성되어 비교됩니다.

 

---

다음번에는 React가 이 Diffing 과정에서 어떤 '효율적인 알고리즘'을 사용하는지, 그리고 이 과정에서 흔히 발생하는 성능 저하 요인과 최적화 기법에는 무엇이 있는지 다뤄보려고 합니다.

읽어주셔서 감사합니다.