React의 Virtual DOM에 대해 알아보자

* 이 글은 아래 글을 읽고 공부하면서 요약 정리한 글입니다 

velopert.com/3236

 

virtual DOM의 작동원리를 이해하기 위해서는 브라우저 렌더링 과정에 대해서 이해해야 한다.

이전에 브라우저 렌더링 과정을 정리한 글이 있으니 한 번 읽어보자.

 

2020/09/17 - [FE면접준비] - 브라우저 렌더링 과정

 

리액트는 '뷰' 만을 담당하는 라이브러리이며 DOM에 변화가 생겼을 때 변경사항을 적용하는 것이 아니라

기존 뷰를 날리고 다시 새로운 뷰를 렌더링한다. 

 

복잡한 Modification 작업을 하지 않아도 된다는 장점이 있지만 매번 뷰를 날리고 새로운 뷰를 렌더링하는 것은 부담이 클텐데 어떻게 리액트는 성능을 최적화하는 것일까?

 

리액트는 virtual DOM을 이용하여 DOM 조작을 최소화한다.

 

DOM에 변화가 일어나면 바로 실제 DOM에 적용되는 것이 아니라 자바스크립트로 구현된 virtual DOM에 렌더링하고 

이전 DOM과 가상 DOM을 비교해서 변경된 부분만 실제 DOM에 적용해준다.

 

브라우저 렌더링 과정을 단순하게 요약하면 

 

1. html을 파싱하여 DOM Tree를 만든다. 

2. css를 파싱한 CSSSOM과 DOM Tree를 합해 Render Tree를 만든다 (노드의 스타일을 처리하는 작업은 attachment라고 한다) 

3. layout (or reflow) 연산으로 각 요소의 위치를 계산한다 

4. paint 연산으로 dom의 스타일에 따라서 화면에 실제로 그려준다 

 

 

즉, 위의 과정에서 DOM에 변화가 일어나면 위의 과정이 다시 일어나게 된다. 

화면의 DOM 조작이 많이 일어나면 브라우저 연산이 늘어나고 성능 저하로 이어진다. (어쩌다 다른 블로그 글에서 봤던 dom은 느리지 않은데 브라우저가 느리다는 말이 이 말이었을지도..?)

 

virtual dom은 이전 dom과 현재의 변화를 연산해서 최종적으로 변경된 결과만 실제 dom에 던져주므로 최종적으로 묶어서 한 번 연산한다고 생각할 수 있다. 

 

이렇게 변화를 묶어서 적용하는 것이 성능을 최적화한다고 볼 수 있겠다.

 

virtual dom의 장점은 실제 어디 어디에 변화가 일어났는지 몰라도 자동으로 변화를 찾아준다는 점이다. 

다른 컴포넌트와 상호작용할 필요도 없고 dom 조작에 대한 정보를 교환할 필요없이 모든 작업을 자동화, 추상화해준다. 

 

리액트가 dom보다 빠르다는 것은 잘못된 상식이다. 하지만 리액트는 대부분의 경우 `충분히 빠르고`  유지보수 가능한 어플리케이션을 만드는 것에 좋다. 리액트를 사용할 때 제대로 최적화해주지 않는 다면 리액트를 쓰지 않을 때보다 훨씬 더 느릴 수 있다는 것을 염두해두자.