[React] Virtual DOM의 개념과 동작 방식

 

1) DOM이란?

- Document Object Model(문서객체모델)의 약어로 객체로 문서 구조를 표현하는 방법을 말함

- 웹 페이지의 구조화된 표현을 생성하고 프로그래밍적으로 접근하고 조작할 수 있는 인터페이스를 제공

- HTML, XML 및 XHTML과 같은 문서의 구조, 스타일 및 콘텐츠를 표현하는 방법을 정의

- JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소를 동적으로 변경하거나 조작

- 사용자 인터페이스를 구성하고 사용자와의 상호 작용을 처리하는 데 중요한 역할

- 웹 페이지를 트리 구조로 나타내며 각 요소는 객체로 표현

 

[출처] https://poiemaweb.com/js-dom

 

 

 

 

 

 

 

반응형

 

 

 

 

 

2) Virtual DOM 개념과 동작 방식

- 실제 DOM의 가벼운 복사본
- 웹 애플리케이션에서 사용자 인터페이스를 효율적으로 관리하기 위해 사용
- 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동

- 사용자 상호 작용이나 데이터 업데이트와 같은 이벤트가 발생하면, 이를 토대로 가상 DOM이 업데이트되고,

이후 변경된 부분만을 실제 DOM에 반영하여 UI를 업데이트되는 방식