[React] Virtual DOM(가상 돔)

Virtual DOM 이란?

실제 DOM의 가벼운 사본과 비슷하다. Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하지 않고, DOM을 추상화 한 자바스크립트 객체를 구성하여 사용한다.

 

Virtual DOM 사용 이유

HTML 마크업을 시각적인 형태로 변환하는 것은 웹브라우저가 하는 주 역할이기 때문에 이를 처리할 때 컴퓨터 자원을 사용하는 것은 어쩔 수 없다. DOM은 트리 구조로써, 업데이트 후에 변경된 요소와 하위 요소를 다시 렌더링 하여 웹브라우저 UI를 업데이트해야 한다. 따라서 UI 구성 요소가 많을수록 DOM 트리를 다시 렌더링 해야 되므로 성능이 저하된다.

이런 문제를 해결하려면 DOM을 최소한으로 조작하여 작업해야 된다.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

 

Virtual DOM 작동 방식

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다. (Diff 알고리즘)
3. 바뀐 부분만 실제 DOM에 적용한다.

위 그림은 리액트 라이브러리에서 업데이트를 어떻게 진행하는지 보여준다.

리액트에서 뷰를 업데이트할 때는 "업데이트 과정" 보다는 "재조정(Reconciliation) 과정"이라고 한다.

컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문이다.

 

React를 사용할 때, render() 함수는 react의 새로운 엘리먼트를 반환한다. state나 prop가 바뀌어서 render() 단계에서 다시 새로운 엘리먼트를 반환한다. 여기서 새롭게 렌더링이 될 때, react는 DOM diff 알고리즘을 이용해 효율적으로 UI를 업데이트한다.

Diff 알고리즘 : https://ko.reactjs.org/docs/reconciliation.html

 

마무리

• 빈번한 DOM 조작은 비싸고 성능이 무겁다.
• Virtual DOM은 실제 DOM의 가상 표현이다.
• React는 Virtual DOM을 사용하여 성능을 향상시킨다.
• 상태 변경이 발생하면 Virtual DOM이 업데이트되고, 이전 Virtual DOM과 새로운 Virtal DOM이 비교된다.이것을 “diffing”이라고 한다.
• 그런 다음 Virtual DOM은 배치 업데이트를 실제 DOM으로 보내 UI를 업데이트한다.
• React는 효율적인 diff 알고리즘을 사용하여 가상 DOM 버전을 비교한다.
• 그런 다음 배치된 업데이트가 UI를 다시 그리거나 다시 렌더링 하기 위해 실제 DOM으로 전송한다.

 

 

[참고]

https://blog.10pines.com/2018/08/27/reactjs-virtual-dom/

https://programmingwithmosh.com/react/react-virtual-dom-explained/