[CS] 가상 돔이란 무엇인가요?

가상 돔이란

• 가상돔은 실제 DOM 조작의 비효율성을 해결하기 위해 도입된 개념

• 실제 DOM을 조작하게 되면 매 변경마다 브라우저의 리플로우(Reflow)와 리페인트(Repaint)를 유발하며, 이는 웹 성능에 좋지 않은 영향을 끼침

  • 가상 DOM은 메모리 내 변경 사항을 최적화하여 실제 DOM 조작을 최소화
  • 가상돔은 실제 DOM에 반영하는 대신 메모리 내 가상의 트리를 만들어 돔을 직접 수정하는 대신 변경 사항을 먼저 적용한 후, 변경된 부분만 실제 DOM에 반영하는 방식으로 작동

• Diffing 알고리즘을 사용해 이전 가상돔과 새 가상돔을 비교하여 최소한의 변경 사항만을 찾아냄

• Reconciliation 과정을 통해 실제 DOM을 효율적으로 업데이트

핵심 메커니즘

• 가상돔 생성
  • UI 변경 발생 시 새로운 가상돔 트리를 메모리에 생성
• Diffing 비교
  • 이전 가상돔 스냅샷과 비교해 변경된 노드 탐지
• 배치 처리
  • 여러 업데이트를 단일 배치로 그룹화
• 실제 DOM 적용
  • 변경된 부분만 선택적 업데이트