Virtual DOM_React

miin·2022년 1월 5일
0

React

목록 보기
33/55
post-thumbnail

정의

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신,
이를 추상화한 자바스크립트 객체를 구성하여 사용하는 것

절차

EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우.

  • 리액트를 이용해 돔을 업데이트 시키는 절차
  1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함
  2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교)
  3. 바뀐 부분만 실제 DOM에 적용이 됨
    (컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)

버츄얼돔을 사용하는 이유

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다
큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타냄
리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끄는 것

0개의 댓글