DOM 가상돔이란? 리액트 가상돔

DOM이란?

→ Document Objhect Model

DOM (Document Object Model) 돔 이라 불리우는 이 것은 → 객체 문서 모델

객체로 문서 구조를 표현하는 방법이다. 트리 형태이며 XML, HTML 로 작성한다.

Elements 요소 = html 하나 하나의 요소 를 말한다

Document 문서 ! = 이 모든 요소들을 담고 있는 웹 페이지 를 말한다.

브라우저 (컴퓨터 화면 ) ⇒ 이 페이지에 해당하는 html 을 분석해서 화면에 멋지게 띄어준다

그렇다면 DOM이란 웹페이지에 들어있는 요소( html element )들을 트리형태 구조로 표현한 것이다.

아래 그림 첨부

가상돔 Virtual DOM

→ 리액트는 가삼동을 사용하여 실제 돔을 조작하는 일을 엄청 나게 빠르게 도와준다.

가상돔 이란 ?

실제 돔과 같은 내용을 담고 있는 복사본 copy 본 (이 복사본은 실제 돔이 아닌 JS자바스크립트 객체 형태로 메모리안에 저장되어 있다)

가상돔은 복사 본 이라서 실제 돔 안에 들어있는 모든 element(html&element)들과 속성들을 똑같이 가지고 있다.

하지만! 가상돔은 실제돔과는 다르게!!

• 브라우저안에 있는 문서에 직접적으로 접근 할수는 없❌
• 화면에 나오는 내용을 직접 수정 불가 ❌

그렇다면 왜? 복사본을 만든 이유는 ?

→ 리액트 는 가상돔을 통해서 우리가 실제 돔을 조작하는 속도를 획기적으로 줄여준다.

DOM 조작

• DOM 의 내용을 조작해줄 때마다 브라우저화면의 ul를 변경하는 것은 꽤나 복잡하고 시간이 걸린다. (비효울작이다)
• 가상돔은 항상 디폴트 2개의 가상돔을 가지고 있다

Before | After 비포애프터 라고 생각하셈

---

• 가상돔 생성 → 리엑트는 state 가 변경 될 때마다 화면 이 새롭게 🆙date 렌더링된다.

— 렌더링이 발생될 상황일 때 마다 새로운 내용이 담길 가상돔을 생성한다. (실제 브라우저에 담기기전에)

• Diffing ⇒ ? 렌더링 하기 전에 화면 내용을 가지고 있는 첫 번째 가상돔과 🆙date 이후의 내용을 담고 있는
• —> 두번째 가상돔을 비교해서 정확히 어느 요소들이 (elementS) 변했는지 찾아낸다 → 매우 효율적이다 👀
• 재조정(Reconsillation): 딱 바뀐 부분만 찾아서 실제 브라우저 화면에 적용시킨다
• —> 재조정이 효율적인 이유는 ? → Batch Update
• Batch Update(집단 🆙date ) : 변경된 모든 요소들을(elements) 한번에 동시에!! 적용시켜준다!

(만약 list안에 10개의 항목이 바뀌었다면 실제돔을 10번 반복해서 조작하는 것이 아니라, 한꺼번에 바뀐 모든 부분들을 집단으로 조작시켜준다. 돔조작에 있어서 가장 비용이 많이 드는 부분은 화면을 그려주는 작업.

Batch update는 변경된 부분을 하나하나 따로따로 그려주는 것이 아니라

변경된 내용을 한번에 다 받아와서 실제돔에 한꺼번에 적용 → 빠르고 효율적)

 

 

Main Point 📌 총 정리 

 

1. 리액트의 가상돔은 (실제 DOM과 같은 내용을 담고 있는) 복사본이다!  이 복사본은  JS 객체 형태로 메모리상에 저장되어 있다. 📸
2. 리액트는 항상 두 개의 가상돔을 갖고 있다. 2️⃣비포 & 애프터 내용을 다 담고 있다 🥸 ↔ 👧🏻
3. 첫번째 가상돔은 변경 이전의 내용을 담고 있고, 두번째 가상돔은 병경 이후에 보여질 내용을 담고 있다.
4. 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에그리고 이러한 과정을 Diffing이라고 부른다. 디핑~
5. 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 요소들이 바뀌었는지 효율적으로 비교하여 파악한다✔️
6. Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로써 실제 DOM에 한번에 적용시켜준다.그리고 이러한 과정을 Reconsiliation, 재조정이라고 한다.