개념
Virtual DOM은 React에서 사용되는 핵심 개념으로, 실제 DOM을 JS 객체 형태로 복제한 가벼운 사본이라고 할 수 있습니다. 브라우저의 DOM은 구조적으로 복잡하고, 이를 직접 조작하는 작업은 성능 비용이 상당히 높습니다. Virtual DOM은 이를 개선하여 웹 애플리케이션의 성능을 최적화하기 위해 등장했습니다.
Virtual DOM의 핵심 아이디어는 상태 변경이 발생할 때마다 전체 UI를 Virtual DOM에 반영하고, 이를 이전 상태와 비교하여 필요한 부분에 한해서 최소한의 DOM 업데이트를 수행하는 것입니다. Virtual DOM을 업데이트하고 비교하는 일은, 실제 DOM을 조작하지 않고 메모리 상에서 업데이트와 비교가 이뤄지기 때문에 가볍고 빠르게 수행됩니다.
React에서 Virtual DOM을 활용되는 구체적인 과정
1.
상태 변경: 컴포넌트의 상태나 props가 변경되면 Virtual DOM이 다시 생성됩니다.
2.
재조정(Reconciliation): 비교 알고리즘을 이용해 새로운 Virtual DOM과 이전 Virtual DOM 간의 차이를 계산합니다.
3.
re-render: 계산된 차이에 따라 실제 DOM에서 필요한 부분만 업데이트합니다.