[React] Virtual DOM

Virtual DOM

React의 주요 특징 중 하나는 virtual DOM을 사용한다는 것이다. 그래서 virtual DOM에 대해 알아봐야 하는데 그 전에 우선 브라우저가 렌더링하는 과정을 살펴봐야 한다.

 

웹페이지 빌드 과정(Critical Rendering Path, CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계를 거친다. 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰표트에 표시하는 과정이다.

 

여기에서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 render tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산하고 레이아웃, 리페인트 과정까지 다시 거친다. 이러한 문제로 인해 나온 것이 virtual DOM이다. virtual DOM이란 real DOM을 메모리에 복사한 것으로 생각하면 된다.

 

Virtual DOM의 작동 방식

데이터가 바뀌면 virtual DOM에 렌더링되고 이전에 생긴 virtual DOM과 비교해 바뀐 부분만 real DOM에 적용시킨다. 바뀐 부분을 찾는 과정을 디핑(diffing), 바뀐 부분만 real DOM에 적용시키는 것을 재조정(reconciliation)이라고 한다. 이러한 virtual DOM 덕분에 만약 요소가 30개 변했다고 해도 하나로 묶어 한 번의 real DOM 수정으로 처리하게 되어 DOM 조작 비용을 줄일 수 있다.