가상 DOM 그리고 DOM

 

가상돔을 이해하기 위해서는 아래 두개의 링크를 보고와야한다.

https://parkjaeho.tistory.com/84

DOM (document object model) + CSSOM

 

https://parkjaeho.tistory.com/85

Critical Rendering Path

 

브라우저는 html 파일을 한줄 한줄 읽으면서 파싱을 하면서 DOM 요소를 만든다.

그 후 -> Render tree 생성 -> layout-> painting -> composition 단계를 거치게 된다.

DOM을 만들때마다 Render Tree 생성부터 layout->... 단계를 거치게 된다.
(브라우저가 수행해야하는 레이아웃이 너무 많은 관계로 느리다.)

 

이로 인해 react는 Virtual dom 을 사용한다.

*React 요소로 구성된 Virtual DOM*

ReactDOM.render() 메소드를 사용해 가상돔을 실제 돔에 붙힌다.

 

실제 DOM을 직접적으로 조작하는 것이 아니라,
이전에 생성된 가상 돔/현재 새롭게 생성된 가상돔 상태를 비교하여
변경 사항이 발생할 때 변경된 부분만 실제 DOM에 업데이트하므로
UI 속도를 크게 향상시킬 수 있다.

 

[출처] https://www.slideshare.net/gyeongseokseo/virtual-dom

Virtual dom