Virtual DOM(가상돔)

Viirtual DOM 가상돔

DOM(Document Object Model)

 

getElementById()나 querySelector()와 같은 API를 사용하여 DOM 내부에 접근해서 조작한다

 

React의 가상돔은 실제돔이 아닌 실제돔의 복사본

이 실제돔의 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있음

 

가상돔은 실제돔과 다르게 직접적으로 접근할 수 없고 따라서 수정할 수 없음

 

React는 항상 두 가지 형태의 가상돔 구조를 가지고 있음

 

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

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

 

React는 state가 변경될 때마다 화면이 새로 렌더링 됨.

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

React는 업데이트 이전의 내용을 담고 있는 가상돔과 업데이트 이후의 내용을 담고 있는 가상돔을 비교해서

정확히 어느 엘리먼트들이 변했는지 찾아냄. 이러한 과정을 Diffing이라고 함

React는 Diffing을 통해 딱 바뀐 부분들만 실제 돔에 적용시킴 -> 이것을 Reconciliation 재조정이라고 함

 

React의 Reconciliation 재조정이 매우 효율적인 부분은 바로 Batch Update 덕분 

Batch Update는 변경된 모든 엘리먼트들을 집단으로 실제돔에 한 번에 적용시켜주는 것 

만약 리스트 안에 열 개의 항목이 바뀌었다면 실제 돔을 열 번 조작해서 바뀌는게 아니라, 한 번에 집단으로 바꿔주는 것

따라서 빠르고 효율적임.