React에서 사용되는 핵심 개념, 실제 DOM을 JS객체 형태로 복제한 가벼운 복사본
브라우저의 DOM은 구조가 복잡하고 직접 조작하는 작업의 성능 비용이 높음
가상 돔은 이를 개선하여 웹 애플리케이션의 성능을 최적화할 수 있음
핵심 아이디어는 상태 변경이 발생할 때마다 전체 UI를 Virtual DOM에 반영하고, 이를 이전 상태와 비교하여 필요한 부분에 한해서 최소한의 DOM 업데이트를 수행
가상돔에 업데이트하고 비교하는 일은, 실제 DOM을 조작하지 않고 메모리 상에서 업데이트와 비교가 이뤄지기 때문에 가볍고 빠르게 수행됨
과정
상태 변경:컴포넌트 상태나 props가 변경되면 Virtual DOM이 다시 생성
재조정(Reconciliation):비교 알고리즘을 이용해 새로운 Virtual DOM과 이전 Virtual DOM 간의 차이 계산
re-renderL계산된 차이에 따라 실제 DOM에서 필요한 부분만 업데이트
결국 DOM 업데이트 비용 줄이고, 브라우저 렌더링 성능 개선
React는 비교(diffing) 알고리즘 어떻게 효율화했나?
O(n)의 복잡도를 가질 수 있는 트리 비교 문제를, 휴리스틱을 통해 O(n)으로 최적화 함
휴리스틱 알고리즘
1. 서로 다른 타입의 두 요소는 서로 다른 트리를 만들어낸다
DOM 요소의 타입이 다를 경우( ex- div => span) 비교를 수행하지 않고, 해당 요소와 그 자식들을 모두 새로 생성
자식 요소들의 내용이 같더라도 이전의 트리를 모두 버리고 완전히 새로 만듬
비효율적으로 보일 수는 있어도, 실제 애플리케이션에서 타입이 다른 경우 보통 완전히 다른 컴포넌트로 교체되는 상황이 많기 때문에 이 가정이 대부분 효율적임
만약 동일 타입의 요소라면, 동일한 내역은 유지하고 변경된 속성만 갱신
<div className='before' title='stuff' />
<div className='after' title='stuff' />이 예시에선 claaName만 수정함
- 개발자가 key prop 을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시 가능
같은 레벨의 자식들 비교할 때 개발자가 입력한 key prop을 사용하여 요소를 식별
이를 통해 리스트 내역의 일부가 수정됐을 때 모든 아이템 요소들을 불필요하게 갱신하지 않고, 실제 변경된 요소만 감지하여 효율적으로 갱신함
