웹 브라우저는 화면을 그리기 위해 dom을 사용한다.
dom은 html이 javascript와 css같은 언어로 스타일링을 할 수 있도록 만들어진, 웹 페이지의 객체 모델이다.
사용자가 html의 태그 요소를 통해 홈페이지를 구조화시키면 이 html언어는 트리 구조를 가진 객체로 표현된다.
dom에는 홈페이지 스타일링을 도와주는 여러 method들이 정의되어 있다.
React에서 사용하는 가상 dom도 실제 dom 내용에 기반하여 만들어진다.
왜 가상 DOM인가?
실제 dom에는 브라우저가 화면을 렌더링하는데 많은 정보가 필요하다. 만약 사용자가 dom을 업데이트 시 브라우저가 html과 css파일을 파싱후 결합하여 렌더링 트리를 만들고, 이 렌더링 트리에서 각 노드의 위치와 크기를 계산하고 레이어를 만든뒤 화면에 나타낸다. 이 작업을 업데이트 할 때마다 다시 실행한다는 뜻이다.
parsing -> Style -> Layout -> Paint -> Composite
위와같은 리렌더링은 웹페이지의 성능을 저하시키는 요인이 된다.
그렇다면 이 업데이트를 가상dom에 한다면 어떻게 될까?
가상 DOM 역시 실제 DOM에 기반하여 만들어진다.
가상 dom은 메모리에 가상으로 존재하는 dom으로써 javascript 객체이기 때문에 작동 성능이 실제 dom보다 훨씬 빠르다.
리액트에서 상태가 업데이트 되면 업데이트가 필요한 곳의 UI를 virtual dom을 통해서 렌더링한다. 이후 실제dom과 비교를 하여 차이가 있는 곳을 체크하여 실제 dom에 패치시켜준다.
virtual dom은 일종의 dom캐싱 이라고 볼 수 있다.
React에서 virtualdom을 이용한 렌더링 과정
- 특정 컴포넌트에서 setState의 호출 등의 이유로 컴포넌트의 상태가 변화하게되면 해당 컴포넌트의
shouldComponentUpdate함수를 실행한다. 그 함수가 return true를 하면render함수를 실행한다.
만약 return false면, render함수를 실행하지 않는다.
-
상태가 변한 컴포넌트를 root-node로 해서 dfs를 통해 각 자식컴포넌트의
shouldComponentUpdate함수와render함수를 실행한다. -
render함수를 통해서 얻은 virtual dom을 실제 dom과 비교하여 변경 사항을 파악한다. 실제 변경된 부분만 dom api를 호출하여 dom에 반영해서 새로운 render tree를 생성해 화면을 다시 그린다.
