기타

Virtual DOM

js0616 2024. 7. 29. 05:53

https://www.youtube.com/watch?v=XWqs1mMPJ30

 

 

자바스크립트는 DOM 요소에 직접 접근하여 조작하는데, DOM의 요소가 많거나 접근과 조작이 빈번한 경우 성능의 문제가 발생할 수 있습니다. 이에 대한 방안으로 Virtual DOM 을 활용할 수 있습니다. 

 

Virtual DOM은 실제 DOM을 추상화하여 만든 자바스크립트 객체로 트리 구조로 표현됩니다. 

  1. 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성
  2. state나 props가 변경시, 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성
  3. 두 Virtual DOM을 비교하여 어떤 부분이 변경되었는지 확인
  4. 변경된 부분만 실제 DOM에 적용합니다.

 

그럼 state나 props가 변경될 때마다 Diffing과 Reconciliation이 수행되는건가요?

Batch 업데이트 기능을 사용하는데, 짧은 시간 안에 여러 개의 state와 props가 동시에 변경되면 한꺼번에 모아서 처리합니다. 

  • 이벤트 루프 주기
  • 애니메이션 프레임 주기
  • 비동기 업데이트 시점
  • 자체적인 업데이트 주기

React 18 에서는 자동 배칭(Automatic Batching) 을 지원합니다. setTimeout , promise, native event 같은 처리에 대해서도 같은 주기(?) 에 배치 됩니다.

 

 

Virtual DOM을 사용하는 것이 그렇지 않은 것보다 좋은가요?
항상 그런 것은 아닙니다. 간단한 어플리케이션의 경우에는 Virtual DOM을 사용하는 것이 오히려 오버헤드를 초래할 수 있습니다. 왜냐하면 Virtual DOM 자체도 메모리 공간을 차지하고, Diffing하는 과정 역시 CPU를 활용하기 때문입니다. 다만, DOM 트리가 복잡하고, 상태 변경도 빈번하게 일어나는 대규모 어플리케이션에서 사람의 인지 능력으로는 정확히 어떤 DOM을 업데이트해야 하는지 식별하기 어렵기 때문에, Virtual DOM을 사용하는 것입니다. 따라서, 어플리케이션의 복잡도와 요구 사항에 맞게 Virtual DOM 적용 여부를 결정하는 것이 좋습니다.

 

 

 

https://nukw0n-dev.tistory.com/33

 

https://jeonyoungho.github.io/posts/React%EC%97%90%EC%84%9C%EC%9D%98-Virtual-DOM/

 

https://58cjdcns99.tistory.com/entry/React-Batching%EA%B3%BC-React18%EC%9D%98-Automatic-Batching