본문 바로가기

Frontend

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

 

 

 

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff bet...

stackoverflow.com

 

 

이 글은 Stackoverflow의 질문을 번역한 글입니다. 작성자가 궁금했던 것은 Pete Hunt가 모델에 대한 Dirty Checking이 느릴 수 있다고 했는데, 대부분의 경우 Virtual DOM이 모델보다 커야 하기 때문에  Virtual DOM 간의 차이를 계산하는 것은 성능이 떨어질수도 있지 않냐는 의문입니다. 

 

이 의문에 대해 해결해야할 두가지 문제가 있습니다.

 

1. 언제 다시 렌더링해야 하나요?  -> 데이터가 더럽다고 판단될 때

2. 효율적으로 리렌더링 하려면 어떻게 해야하나요? -> Virtual DOM을 사용하여 Real DOM 패치 생성하기

 

리액트에는 각 컴포넌트에 state가 있습니다. 이 상태는 knockout이나 MVVM 스타일 라이브러리에서 볼 수 있는 Observable과 비슷합니다. 기본적으로 리액트는 이 데이터가 언제 변경되는지 관찰할 수 있기 때문에 언제 다시 렌더링할지 알 수 있습니다.   Dirty Checking은 일정한 간격으로 데이터를 폴링하고 데이터 구조의 모든 값을 재귀적으로 확인해야 하므로 Observable보다 느립니다. 이에 비해 state에 값을 설정하면 리스너에게 어떤 상태가 변경되었다는 신호가 전달되므로 리액트는 state의 변경 이벤트를 수신하고 리렌더링을 대기열에 대기시킬 수 있습니다. 

 

Virtual DOM은 DOM을 효율적으로 다시 렌더링하는데 사용됩니다. 이는 데이터 Dirty Checking과 관련이 없습니다. Dirty Checking을 사용하거나 사용하지 않고 Virtual DOM을 사용하여 리렌더링할 수 있습니다. 두 가상의 트리 간의 차이점을 계산하는데 약간의 오버헤드가 있다는 점은 맞지만, Virtual DOM의 차이점은 데이터가 변경되었는지 여부가 아니라 DOM에서 업데이트가 필요한 항목을 파악하는 것입니다. 사실 Diffing 알고리즘은 그 자체로 Dirty Checker이긴 하지만 대신 DOM이 Dirty한지 확인하는데 사용됩니다.

 

상태가 변경될 때만 Virtual Tree를 렌더링하는 것을 목표로합니다. 따라서 Observable을 사용하여 상태가 변경되었는지 확인하는 것은 불필요한 트리 차이점 계산을 많이 유발하는 불필요한 리렌더링을 방지하는 효율적인 방법입니다. 아무것도 변경되지 않았다면 아무것도 하지 않습니다. 

 

Virtual DOM은 전체를 다시 렌더링하는 것처럼 코드를 작성할 수 있다는 점에서 유용합니다. 백그라운드에서는 DOM을 업데이트하는 패치 작업을 계산합니다. 따라서 Virtual DOM Diff/Patch 알고리즘이 최적의 솔루션은 아니지만, 애플리케이션을 표현하는데 매우 좋은 방법입니다. 우리가 원하는 것을 정확히 선언하기만 하면 React/virtual-dom이 알아서 처리해줍니다. 우리는 수동으로 DOM을 조작하거나 이전 DOM 상태에 대해 혼동할 필요가 없습니다. 전체를 다시 렌더링할 필요도 없고 그냥 변경 사항만 patch하면 됩니다.