[React] 리액트 Virtual DOM 가상돔

Q. 질문

리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #6)

 

A. Dom

DOM 이란?

DOM(Document Object Model) 은 웹 페이지의 구조와 내용을 표현하는 데 사용한다.

 

하지만, DOM 의 변경이 생길 때마다 브라우저는 화면을 다시 그리고 다시 렌더링 하게 된다.

이러한 과정은 복잡한 UI 에서는 성능 문제를 일으킬 수 있다.

 

레이아웃을 다시 계산하며 페이지를 다시 그리는 작업을 하다보니, 성능 저하의 주요한 원인이 되고 비용 문제가 발생한다.

 

그래서 이러한 문제점을 개선하기 위해 React 에서는 Virtual Dom 이라는 것을 사용한다.

 

A. Virtual DOM

Virtual DOM 이란?

React 에서는 가상돔(Virtual Dom) 을 사용하여,

상태가 변경되면 가상 DOM 이 업데이트되고, 변경된 부분만 실제 DOM에 적용된다.

즉, 가상 DOM 을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동한다.

 

가상돔(Virtual Dom) 동작 과정

1. UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링 (실제 화면 X)
2. 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산
3. 변경된 부분을 실제 DOM에 반영

 

Virtual DOM 장점

1. 성능 향상

변경된 부분만을 감지하고 업데이트하기 때문에 전체 DOM 을 다시 렌더링할 필요가 없어 성능이 향상된다.

 

2. UI 업데이트 최적화

컴포넌트의 상태나 속성이 변경될 때마다 전체 UI를 다시 렌더링하지 않고도 변경된 부분만 업데이트하여

반응 속도를 향상시키고 사용자 경험을 개선해준다.

 

등이 있다.