Virtual DOM에 대해서 설명해주세요

Virtual DOM은 React에서 사용되는 핵심 개념으로, 실제 DOM을 JS 객체 형태로 복제한 가벼운 사본이라고 할 수 있습니다. 브라우저의 DOM은 구조적으로 복잡하고, 이를 직접 조작하는 작업은 성능 비용이 상당히 높습니다. Virtual DOM은 이를 개선하여 웹 애플리케이션의 성능을 최적화하기 위해 등장했습니다.

Virtual DOM의 핵심 아이디어는 상태 변경이 발생할 때마다 전체 UI를 Virtual DOM에 반영하고, 이를 이전 상태와 비교하여 필요한 부분에 한해서 최소한의 DOM 업데이트를 수행하는 것입니다. Virtual DOM을 업데이트하고 비교하는 일은, 실제 DOM을 조작하지 않고 메모리 상에서 업데이트와 비교가 이뤄지기 때문에 가볍고 빠르게 수행됩니다.

React에서 Virtual DOM을 활용되는 구체적인 과정은 다음과 같습니다.

상태 변경: 컴포넌트의 상태나 props가 변경되면 Virtual DOM이 다시 생성됩니다.
재조정(Reconciliation): 비교 알고리즘을 이용해 새로운 Virtual DOM과 이전 Virtual DOM 간의 차이를 계산합니다.
re-render: 계산된 차이에 따라 실제 DOM에서 필요한 부분만 업데이트합니다.
Virtual DOM은 이처럼 DOM 업데이트의 비용을 줄이고, 브라우저 렌더링 성능을 개선합니다.

React는 비교(diffing) 알고리즘을 어떻게 효율화했나요? 🤔
React는 O(n³)의 복잡도를 가질 수 있는 트리 비교 문제를, 휴리스틱을 통해 O(n)으로 최적화했습니다.

휴리스틱 알고리즘은 크게 두 가지 가정을 두고 있습니다

1. 서로 다른 타입의 두 요소는 서로 다른 트리를 만들어낸다.
DOM 요소의 타입이 다르면(ex. <div> → <span>) 비교를 수행하지 않고, 해당 요소와 그 자식들을 모두 새로 생성합니다. 자식 요소들의 내용이 같더라도 이전의 트리를 모두 버리고 완전히 새로 만듭니다. 이는 비효율적으로 보일 수 있지만, 실제 애플리케이션에서 타입이 다른 경우는 보통 완전히 다른 컴포넌트로 교체되는 상황이 많기 때문에 이 가정이 대부분의 경우 효율적입니다.

만약 동일한 타입의 요소라면, 동일한 내역은 유지하고 변경된 속성만 갱신합니다.

<div className="before" title="stuff" />

<div className="after" title="stuff" />
예를 들어, 이 예시에서는 className만 수정합니다.

2. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.
같은 레벨의 자식들을 비교할 때 개발자가 입력한 key prop을 사용하여 요소를 식별합니다. 이를 통해 리스트 내역의 일부가 수정됐을 때 모든 아이템 요소들을 불필요하게 갱신하지 않고, 실제 변경된 요소만 감지하여 효율적으로 갱신합니다.