React의 가상돔

우선 가상돔(Virtual DOM)을 알아보기 전에 DOM을 알아봅시다.

DOM은 Document Object Model입니다.

웹페이지의 버튼 글 등등 하나하나의 요소들을 elements라고 부르고

이 모든 것을 담고 있는 웹페이지를 Document라고 합니다.

 

DOM은 이 정도 설명이면 적당하고 Virtual DOM에 대해서 알아봅시다.

React는 가상돔이라는 것을 사용해서 실제돔을 실제 돔을 조작하는 일을 엄청 빠르게 해줍니다.

가상돔은 실제돔의 복제본이라고도 합니다.

 

가상돔은 실제돔과는 다르게 브라우저에 있는 직접적으로 접근을 할 수 없습니다.

그런데 왜 굳이 복사본을 만들어서 가상돔을 사용하는 것일까

 

실제 돔조작은 브라우저가 현제 페이지를 전부 탐색해서 해당 elements를 찾고 해당 elements와 잔여 elements를 돔에서 제거하고 새롭게 수정된 elements로 교체합니다. 그리고 나서 css를 다시 계산하고 레이아웃 정보를 알맞게 수정하고

새롭게 계산된 내용에 따라서 브라우저에 다시 그려줍니다.

 

가상돔은 아까 말했다시피 실제 돔을 복제하여 똑같이 만들었습니다.

리엑트는 항상 두 개의 복제된 가상돔 객체를 가지고 있습니다.

하나는 렌더링 이전에 화면 구조를 나타내는 가상돔이고 

또 다른 하나는 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔입니다.

 

리액트는 state가 변경될 때마다 화면이 새로 렌더링이 됩니다 리엑트는 렌더링이 발생될 상황에 놓일 때 마다

새로운 화면에 들어갈 내용이 담긴 가상돔을 생성합니다.

실제 브라우저에 그려지기 이전에 말이죠

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

업데이트 이후에 내용을 담고 있는 두 번 째 가상돔을 비교해서 정확히 어느 elements가 변했는지 찾아냅니다.

이러한 과정을 Diffing이라고 합니다. Diffing은 효율적인 알고리즘을 사용하기 때문에 정확히 어느 elements들이 변했는지

빠르게 파악 가능합니다.

이렇게 바뀐 elements를 파악한 다음에 리엑트는  그 부분만 실제 돔에 적용시킬 수 있습니다. 

이 과정을 Recinciliation 이라고 합니다.

 

React에 Reconciliation이 굉장히 효율적인 이유는 Batch Update덕분입니다.

 

Batch Update란 변경된 elements들을 실제 돔에 한번에 적용시켜 줍니다.

 

정리

1.  리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본입니다.

     그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있습니다.

 

2.  리액트는 항상 두개의 가상돔을 갖고 있습니다. 첫번 째는 가상돔은 변경 이전의 내용을 담고 있고,

     두 번째 가상돔은 변경 이후에 보여질 내용을 담고 있습니다.  

 

3.  변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에

     리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악합니다.

     그리고 이러한 과정을 Diffing이라고 부릅니다.

 

4.  Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로

     실제 DOM에 한번에 적용시켜 줍니다. 그리고 이러한 과정을 Reconsiliation이라고 한다.