20221103 React - 가상돔 (Virtual DOM)

DOM(Document Object Model)

웹페이지에 들어가 있는 구조들을 트리형태로 구성한 것

Virtual DOM (VDOM) 가상돔

UI의 이상적인 또는 "가상"적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념. 이 과정을 재조정(Reconciliation)이라고 함.

 

- 리액트는 가상돔을 사용해서 실제돔을 조작하는 것을 빠르게 만들어 줌

- 가상돔은 실제돔과 같은 내용을 담고 있는 복사본

   복사본: 실제 돔이 아닌 자바스트립트 객체 형태로 메모리 안에 저장되어 있음

   (실제 돔이랑 똑같은 엘리먼츠 속성을 가지고 있음)

- 브라우저 문서에 직접적으로 접근 불가

 

리액트는 두가지 가상 돔을 가지고 있음

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

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

1,2를 비교해서 바뀐 부분을 찾아냄 (Diffing) 효율적인 알고리즘을 사용해서 일어나기 때문에 바뀐 엘리먼트들을 빠르게 찾아낼 수 있음 > 리액트는 바뀐 부분들만 실제 브라우저 화면에 적용해줌(Reconciliation)

 

리액트의 재조정(Reconciliation) 과정이 효율적인 이유는 Batch Update 때문

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

 

 

 

 

 

 

참고자료 및 출저

https://ko.reactjs.org/docs/faq-internals.html

Virtual DOM과 Internals – React

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

문서 객체 모델 - 위키백과, 우리 모두의 백과사전

https://www.youtube.com/watch?v=gc-kXt0tjTM  별코딩 - React의 가상돔 (Virtual DOM)이 뭔가요? (짱 쉬움)