React Virtual DOM이란?

DOM이란?

---

브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다.

 

• DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현이다.
• DOM은 브라우저가 화면을 그리기 위해 필요한 정보가 트리 형태로 저장된 데이터다.
• DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는대로 변경할 수 있다. 이를 DOM 조작이라고 한다. 

 

728x90

Virtual DOM이란?

---

React에서 Virtual DOM은 실제 DOM 내용에 기반하여 만들어진다. 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 되는데 이 복사본은 실제 DOM이 아닌 JavaScript 객체 형태로 메모리 안에 저장된다. 

 

실제 DOM과 달리, 브라우저에 있는 문서에 직접적으로 접근할 수 없고, 화면에 보여지는 내용을 수정할 수도 없다. 직접적으로 화면에 보이는 UI를 조작할 수 있게 해주는 API를 제공하지 않기 때문이다.  

 

근데 왜 굳이 가상 DOM이 필요할까? 에 대한 의문이 생길 수 있다. 

1. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문에 실제 DOM을 조작하는 작업은 매우 무겁다. 

2. DOM 노드에 직접 CRUD 작업을 수행하는 것은 비싼 작업이다.

3. 매번 DOM을 조작할 때마다 브라우저 화면의 UI를 새롭게 그려주는 작업은 복잡하고, 시간이 많이 소요되기 때문이다. 

 

React는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 JavaScript 객체로 따로 관리한다. 왜냐하면 실제 브라우저에 접근하지 않고, 메모리에 저장된 JS 객체에 접근하는 것이 훨씬 가볍고 빠른 작업이기 때문이다.

 

반응형

Virtual DOM 원리

---

React는 항상 2개의 virtual DOM을 가지고 있다.

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

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

 

1. 화면 re-rendering

2. 2번 가상돔을 생성한다.

3. 실제 DOM이 변경되기 이전에 1번 가상돔과 2번 가상돔을 비교하여 정확히 어떤 엘리먼트에게 변화가 있었는지 효율적으로 파악한다. (diffing 작업)

4. 바뀐 엘리먼트만 Batch Update를 통해 실제 DOM에 적용시킨다. (Reconciliation, 재조정)

• Batch Update: 변경된 모든 엘리먼트들을 집단으로 실제 DOM에 한 번에 적용시키는 것

5. 브라우저는 변경 사항이 반영된 DOM으로 새로운 Render Tree를 생성하여 화면을 다시 그립니다. 

 

 

참고자료

---

• https://ko.reactjs.org/docs/reconciliation.html
• https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

• youtube

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖