가상돔 - Virtual DOM

리액트 가상돔 - React Virtual DOM

DOM 

DOM이란 Document Object Model의 약자이며, 

웹페이지에 들어가는 element 요소들을 tree 형태의 자료구조로 표현한 것입니다.

 

그리고 각 element에는 DOM API가 있어서 DOM을 조작할 수 있습니다.

하지만 이때 리플로우 리페인트가 발생하여 시간이 걸리게 되는데요

이것을 리액트에서는 가상돔을 사용하여 효율적으로 관리합니다.

Virtual DOM 

가상돔은 실제 DOM의 복사본으로 자바스크립트의 객체 형태로 메모리에 저장됩니다.

이것들은 DOM의 복사본으로써 모든 element , 속성들을 가지고 있지만 브라우저에

직접 접근하여 DOM을 조작하는 것은 불가능합니다. (DOM API를 제공하지 않기 때문에)

 

리액트는 2개의 가상돔을 가집니다.

1. 변경 이전의 내용을 가진 가상돔

2. 변경 이후의 내용을 가진 가상돔

 

그리고 리액트는 실제 DOM이 변경되기 전에 두 개의 가상돔을 비교해서 정확히 

어떤 부분이 바뀌었는지 효율적으로 비교하여 파악하는데 이것을 Diffing이라고 합니다. 

 

그리고 Diffing을 통해 변경된 부분을 파악한 후에 리액트는 Batch Update를 통해 실제 DOM에 

변경 사항을 한번에 적용시킵니다.

그리고 이 과정을 Reconsiliation = 재조정이라고 합니다.

 

 

What is Diffing Algorithm ? - GeeksforGeeks