11월 24일 TIL

VDOM(Virtural DOM)

VDOM에 들어가기 앞서 DOM이란?

• MDN문서에서 설명하는 DOM은
  • 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 라고 적혀있다
  • 즉 우리가 HTML에 작성하는 코드를 상호작용하는 객체라고 생각하면 될것같다

DOM의 구조

• 위 사진처럼 DOM의 구조는 트리 구조로 되어있고, 자바스크립트와 같은 스크립팅 언어로 조작이 가능하다

DOM이 작동하는 방식

• DOM은 애플리케이션의 UI상태가 변경되는걸 추적하고 변경사항이 확인될때마다 트리 전체를 업데이트를 진행하는 식으로 작동하게 됨

전체를 그리면 비효율적인거 아니야?

• DOM을 자주 조작하게 되면 트리를 다시 그려내기 때문에 성능에 영향을 주게됨
  • DOM 렌더링은 브라우저의 구동능력에 의존하기 때문에 조작속도가 느려질 수 있음

DOM 조작속도가 느려지는 이유

• 트리구조는 저장된 데이터를 효과적으로 탐색하기 위해 사용되다 보니 빠른 자료탐색이 장점임
  • 그렇기 때문에 DOM은 스크립팅 언어가 접근하고 탐색하는데 있어 속도가 빠르기 때문에 변경이나 업데이트가 쉽고 빠름
• 결국 이는 잦은 변경이나 업데이트가 되는건 브라우저의 랜더링이 많이 일어난단 뜻을 의미함
  • 수정된 부분의 트리만 재구성이 된다면 문제가 없겠지만 DOM은 업데이트 요소와 그 자식요소들에 의해 DOM트리 전체를 재구축하고 재랜더링을 거쳐서 변경된 부분의 UI를 업데이트 해야함
  • DOM 자체가 느린것은 아니고 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 다시 그리는 시간이 허비되면서 느려지는것
• 이는 수정되지않은 부분의 불필요한 랜더링도 같이 발생하기 때문에 비 효율적이고 성능 저하가 발생됨

어떤 상호작용을 하는데?

• 우리가 프로그래밍 언어로 작성하면 그걸 DOM의 구조에 접근할 수 있는 방법을 제공하게 해줌
  • 이런 상호작용으로 구조, 스타일, 내용등을 변경 할 수있게 해줌
• 나만의 언어로 표현하자면 자유도가 있는 하얀 스케치북 도화지라고 생각함
  • 내가 생각해서 그려낸걸 그대로 볼 수 있기 때문에
  • 이렇게 DOM에 대한 설명이 길어졌지만 이를 제대로 알아야 VDOM이 왜 생겨났고 왜 좋은지 알 수 있기 때문에 좀 길어진 부분.. 이제 VDOM으로 넘어간다

---

VDOM이란?

• React라는 라이브러리에 존재하는 가상 DOM 객체
  • VDOM을 쉽게 정의하면 일반 DOM의 가벼운 복사판이라고 할 수 있다

🧐 그래서 왜 VDOM이 생긴건데?

• 위에서 DOM 설명을 기준으로 말 해볼수 있을것 같다.

Real DOM의 단점

• 변경사항이 감지되면 모든 Tree 구조를 재구성 한다
• 재구성하면서 브라우저의 UI 리랜더링이 발생한다
  • CSS,레이아웃등등..
• 변경이나 업데이트가 잦다보니 변경사항이 감지될때마다 위 상황이 발생함
• 그러면서 브라우저의 성능이 저하됨

결론

• 위 이유처럼 속도가 느려지거나 버그가 발생하거나 브라우저가 죽는 등등의 일을 개선하고자 VDOM이 만들어지게됨

어떻게 동작해?

• VDOM은 DOM의 상태를 메모리에 저장후 변경 전과 변경 후의 상태를 비교한 뒤에 최소한의 변경사항만 반영함
  • VDOM은 DOM의 상태나 UI요소를 메모리 위에 계속 유지시키고 DOM에 변경이 있을 경우 해당 변경을 반영하게 되어있음
    
  • 하지만 가상 DOM객체는 화면에 표시되는 내용을 실제 DOM처럼 직접 변경하는것이 아님
  • 실제 DOM을 조작하는건 변경사항을 브라우저 화면에 그리기 때문에 느리지만 VDOM을 조작하는건 실제 브라우저에 화면에 그리는게 아니기 때문에 훨신 속도가 빠름

근데 어떻게 Real DOM보다 V DOM이 더 빨라?

• React는 새로운 요소가 UI에 추가되면 트리구조로 표현이 되는 VDOM이 만들어짐
  • 이런 요소의 상태가 변경되면 다시 새로운 VDOM 트리가 만들어짐
  • 그리고 둘의 차이를 비교해서 작업이 완료되면 VDOM은 실제 DOM에 변경을 적용 할 수 있는 최상위 방법을 계산함
  • 이렇게 되면 실제 DOM은 최소한의 작업만 수행해도 렌더링을 할 수 있게됨
• 이로인해 최소한의 작업으로 최적화된 브라우저 랜더링을 이룰 수 있고 이는 성능개선으로 이어지는 효과를 볼 수 있음

참고 자료 출처

• MDN DOM
• 이미지