7주차 : 리액트에서의 Virtual DOM의 의미, 사용 이유

Virtual DOM이란?

실제 HTML DOM의 복사본이다.

복사본은 DOM이 아닌 JS 객체 형태로 메모리에 저장되어 있다.

이는 실제 복사본이기에 DOM의 모든 element와 속성을 공유한다.

차이점은 브라우저에 있는 Document에 직접 접근할 수 없다는 점이다. 

즉, virtual DOM으로 직접 화면을 수정하는 게 불가능하다.

실제 DOM의 동작 원리

document.querySelector(‘#title”).style.color = “red”;

브라우저는 DOM을 탐색해 변경하고 하는 element를 찾고, 

해당 element와 자식 element를 DOM에서 제거한다.

이후 수정된 element로 교체한다.

새롭게 계산된 내용이 브라우저에 그려진다.

하지만 이를 반복 수행하면 충분히 무거워질 수 있어서

나온 개념이 virtual DOM이다.

리액트의 virtual DOM을 이용한 DOM 조작 원리 

앞서 말한 것 처럼, 가상 DOM은 실제 DOM과 내용을 공유하는 복사본이며,

 실제 DOM과 다르게 직접적으로 브라우저 화면의 UI를 조작할 수 있게 해주는 API는 제공되지 않는다.

가상돔은 메모리에 저장되어 있는 자바스크립트 객체에 불과하기 때문이다.

따라서 가상돔에 접근하고 수정하는 것은 매우 가볍고 빠르다.

실제 브라우저에 접근하는 것이 아니기 때문이다! 

리액트는 항상 두개의 가상돔 객체를 가지고 있다.

1. 렌더링 이전 화면 구조를 나타내는 가상돔

2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

리액트는 STATE가 변경될 때마다 Re-Rendering이 발생한다.

이 시점마다 실제 브라우저가 그려지기 이전에 새로운 내용이 담긴 가상돔을 생성한다.

렌더링 이전에 화면의 내용을 담고있는 첫번째 가상돔과

업데이트 이후에 발생할 두번째 가상돔을 비교해 정확히 어떤 Element가 변했는지를 비교한다.

이를 리액트에선 Diffing이라고 표현한다.

Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에

어떤 Element에 차이가 있는지를 매우 신속하게 파악할 수 있다.

리액트는 이를 통해 차이가 발생한 부분만을 (브라우저상의) 실제 DOM에 적용한다.

이 과정을 Reconciliation(재조정)이라고 한다.

 Batch Update이라는 특징 때문에 이 과정이 효율적이다.

이는 변경된 모든 Element들을 집단화시켜 이를 한번에 실제 DOM에 적용하는 방식이다.

만약 리스트안에 10개의 항목이 바뀌었다면

실제 DOM을 10번 반복해 수정하는 것이 아닌,

한 번에 집단화시켜 이를 적용하는 것이다.

DOM조작에 비용이 가장 많이 발생하는 지점은

브라우저에 화면을 그려주는 작업인 만큼

Batch Update는 변경된 Element를 별개로 그려주는 것이 아닌,

변경된 내용을 한 번에 받아와

이를 실제 DOM에 한번에 적용시켜준다는 점이 효율적이다.