[React] React와 Virtual DOM

 

React and the Virtual DOM (https://www.youtube.com/watch?v=muc2ZF0QIO4)

 

 

기존 방식

 

View가 Model에서 준 수정된 data를 매번 찾아서 바꿈

 

 

 

React의 방식

 

View가 virtual DOM에 Model에서 준 수정된 data를 렌더링을 함

 

-> virtual DOM에 렌더링한 해당 데이터를 real DOM과 비교하여 다른 부분만 수정함

 

-> DOM의 변화를 최소화 시켜줌

 

 

브라우저의 workflow

기존 DOM을 사용하는 경우: 뷰에 변화가 있다면, DOM이 바뀌고 Render Tree를 재생성 하게 되고 모든 스타일의 요소들이 다시 계산되면서 레이아웃을 만들고 페인팅하는 과정이 반복됨->비효율

 

Virtual DOM을 사용하는 경우: 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달->브라우저 내에서 사용하는 연산의 양 감소

 

 

 

 

 

참고

 

https://velopert.com/3236