Virtual Dom(가상돔)

 DOM이란? 

 

DOM(Document Object Model)

즉, DOM은 HTML과 JS를 서로 이어주는 역할을 한다.

---

 Virtual DOM이란? 

 

DOM은 스크립트 언어(JavaScript)를 사용하여 Document 객체를 통해 문서(XML, HTML 등)에 접근 할 수 있도록

도와주는 역할을 하며, 가상 DOM은 실제 DOM의 가벼운 사본 역할을 합니다.

 

우선 브라우저가 DOM을 이용하여 렌더링 하는 방법을 알아보자면

• 브라우저는 HTML 태그를 파싱하여 DOM Tree를 생성합니다.

• DOM Tree와 스타일 규칙(CSS)가 합쳐져 Render Tree를 생성 합니다.

=> 이런 과정을 렌더링 과정이라고 합니다.

 

기존에는 화면의 변경사항을 DOM을 직접 조작하여 브라우저에 반영 하였습니다. 

(ex, document.getElementById(), document.querySelector() 등등..)

 

이렇게 할 경우 DOM Tree가 수정 될 때마다 실시간으로 Render Tree가 생성되고,

불필요한 렌더링 작업이 반복적으로 일어나게 됩니다.

 

그래서 화면에 변화가 생길 때마다 실시간으로 DOM Tree를 수정하지 않고,

가상 돔을 만들어 변경사항을 반영하여 실제 DOM을 수정하게 될 경우

결과적으로 브라우저는 한번만 렌더링이 진행 되기 때문에 불필요한 렌더링을 줄일 수 있습니다.

 

즉, 실제 DOM에 접근하여 조작하는 것보다 가상 DOM을 활용하여 조작 시 불필요한 렌더링 횟수를 줄일 수 있습니다.

---

 리액트에서 가상 DOM 동작 원리 

 

2주차 - 가상돔, 라이프 사이클, 클래스 컴포넌트

---

[React 이해하기1] 가상 DOM