[React] 가상돔 Virtual DOM이란?

가상 돔(Virtual DOM) 이란?

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신,

이를 추상화한 자바스크립트 객체를 구성하여 사용 

 

✅ 실제 DOM의 가벼운 사본

 

DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤
최소한의 내용만 반영 하는 기능 → 성능 향상

가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고,
DOM에 변경이 있을 경우 해당 변경을 반영함

 

리액트가 가상돔을 반영하는 절차

 

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

- 리액트를 이용해 돔을 업데이트 시키는 절차

1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함

 

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교)

 

3. 바뀐 부분만 실제 DOM에 적용이 됨

 

(컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)

 

DOM 비교

결론

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다

큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타냄

리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끄는 것