[React] Virtual Dom 이란? (Diffing, Reconciliation, Batch Update)

React를 공부하면서 Virtual Dom이 도대체 무엇일까?? 어떤 역할을 하는건지 궁금해서 정리해보았습니다.

 

DOM (Document Object Model) 

웹페이지에 들어가있는 HTML elements 들을 트리 형태의 구조 표현한 것 

 

DOM 조작 

개발자들은 dom이 제공하는 api를 통해서 dom 구조에 접근해 원하는 elements의 구조와 스타일을 변경할 수 있음 

ex) Javascript 같은 경우는 getElementById(), querySelector() 등과 같은 API를 통해서 dom구조 안에 있는 elements에 접근해서 원하는대로 내용, style, layout 등을 수정할 수 있음 

 

 

Virtual DOM 가상돔 이란? 

실제 DOM과 같은 내용을 담고 있는 복사본 

이 복사본은 Javascript 객체 형태로 항상 메모리상에 저장되어있다. 

 

왜 복사본을 만드는건가?! 
react는 가상dom을 굉장히 똑똑하게 사용해서 실제dom를 조작하는데 걸리는 시간을 획기적으로 줄여줌 

 

 

react는 항상 두개의 가상돔 객체를 가지고 있음 

• 랜더링 이전 화면 구조를 나타내는 가상dom
• 랜더링 이후에 보이게될 화면 구조를 나타내는 가상dom

 

1. react는 state가 변경될 때마다 랜더링을 하기 때문에

랜더링이 될 상황에 놓일 때 마다 새로운 화면에 들어갈 내용이 담 가상dom을 생성 (실제 브라우저에 그려지기 이전!) 

 

2. 랜더링 이전에 화면에 내용을 담고있는 첫번째 가상dom과 업데이트 이후의 내용을 담고있는 두번째 가상 dom 을 

비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 

 

=> 이러한 과정을 react에서는 Diffing이라고 부름 

 

 

Diffing통해서 변경된 elements들만 파악해서 업데이트 시켜주는데 이를 Reconciliation(재조정) 이라고 부름 

 

react의 Reconciliation이 효율적인 이유는 Batch Update 

Batch Update 는 변경된 elements들을 하나하나 적용하는게 아니라

변경된 내용을 한번에 받아와서 실제 dom에 한번에 적용하기 때문에 훨씬 빠름