맹쑤의 FE 일기

Virtual DOM

1. 실제 DOM과 같은 내용을 담고 있는 복사본, 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있다

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

3. 변경된 내용이 화면에 새롭게 그려지기 이전, 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다 >> 이러한 과정을 Diffing이라 한다

4. Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로 실제 DOM에 한번에 적용시켜준다, 이러한 과정을 Reconsiliation, 재조정이라 한다.

<참고>

https://www.youtube.com/watch?v=gc-kXt0tjTM