Angular vs React | 가상 DOM에 대해서

---

실제 DOM

• Document Object Model
• 웹 페이지의 구조를 표현하는 트리 구조
• HTML 요소들을 객체로 표현

가상 DOM

• 실제 DOM의 가벼운 복제본
• 애플리케이션의 현재 상태를 나타냄
• 메모리에 저장됨
• 실제 DOM과 동기화 됨
• UI 변경이 필요한 경우, 먼저 가상 DOM에서 변경 사항을 계산 한 다음, 실제 DOM에 적용 

---

Angular

• 실제 DOM요소를 직접 조작하며, 변경 사항을 감지 -> 업데이트
• 변경감지는 Angular 프레임워크 내부에서 처리됨
• ngOnInit, ngAfterViewInit, ngOnDestroy 등등..

React

• 가상 DOM을 사용하여 성능 최적화
• 실제 UI 업데이트 시 가상 DOM을 조작
• 이전 가상 DOM과 상태를 비교하여 변경된 부분을 실제 DOM에 적용
• DOM 조작 최소화, 성능 향상