Q. 버츄얼 돔과 리얼 돔의 차이

❓DOM이란 

- Document Object Model의 약자로, 웹 페이지의 객체 지향 표현
- 이는 HTML, XML 문서의 구조를 트리 형태로 표현하며, 프로그래밍 언어가 DOM 구조에 접근하거나 이를 수정할 수 있게 함

❓리얼 DOM이란

- 실제  DOM을 나타내며, 직접적으로 변경하면 브라우저는 레이아웃을 재계산하고 페이지를 다시 그려야 하는 비용이 크게 발생함
- DOM 트리의 한 부분이 변경되면, 전체 DOM이 업데이트되고 렌더링 되어야함

❓버츄얼DOM이란

- 가상 DOM 또는 버츄얼 DOM은 리얼 DOM의 가벼운 사본으로 React 등의 라이브러리에서 사용됨
- 버추얼 DOM은 원래 DOM트리를 멤모리에 유지하고, 상태가 변경될 때 실제 DOM에 직접적으로 반영하지 않고 먼저 가상 DOM에 변경사항을 반영함
가상 DOM을 사용해 실제 DOM과 비교하고, 실제로 필요한 부분만 업데이트하여 성능 최적화를 하는데 이를 Diffing이라고 부름
- 버츄얼 DOM을 사용하면 웹 애플리케이션의 효율성과 속도가 향상될 수 있음

리얼 DOM과 버츄얼 DOM은 웹 페이지의 표현 방식에 차이가 있습니다.
리얼 DOM은 웹페이지의 실제 구조를 나타내며, 변경 사항이 생길 때마다 전체 페이지를 다시 렌더링합니다. 이로 인해 성능 저하가 발생할 수 있습니다.
반면에 버츄얼 DOM은 리얼 DOM의 가벼운 복사본으로, 상태가 변경될 때마다 전체 페이지를 렌더링하지 않고 변경된 부분만 실제 DOM에 반영합니다. 이러한 방식으로 렌더링 비용을 최소화하고, 웹 애플리케이션의 성능을 개선합니다. React와 같은 라이브러리에서는 이러한 버츄얼 DOM 기법을 활용합니다.
결론적으로, 버츄얼 DOM은 리얼 DOM의 업데이트 과정을 최적화하여 성능 향상에 크게 기여합니다.