Virtual DOM이란?

답변 확인

• Virtual DOM은 React에서 사용되는 핵심 개념으로, 실제 DOM을 가볍게 복제한 JS객체 형태의 사본
• 브라우저의 DOM은 구조적으로 복잡하며, 직접 조작할 경우 성능 비용이 높기 때문에 이를 개선하기 위해 등장한 개념
• Virtual DOM을 활용하면 전체 UI를 업데이트하는 대신 변경된 부분만 찾아 최소한의 DOM 업데이트를 수해하여 성능을 최적화

1. Virtual DOM의 동작 과정

1️⃣ 상태 변경

• 컴포넌트 상태(state)나 props가 변경되면 새로운 Virtual DOM이 생성됨

2️⃣ 재조정(Reconciliation)

• 새로운 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 찾음

3️⃣ 업데이트(rendering)

• 필요한 부분만 실제 DOM에 반영하여 최소한의 리렌더링을 수행함

📌 이과정을 통해 불필요한 렌더링을 방지하고, 브라우저의 성능을 최적화할 수 있음

2. React의 Virtual DOM 비교(diffing) 최적화 방법

• DOM 트리는 중첩 구조이기 때문에 일반적으로 두 개의 트리를 비교하는 작업은 O(n³)의 시간 복잡도를 가질 수 있음
• React 휴리스틱(henuristic) 알고리즘을 사용하여 이를 **O(n)**으로 최적화

🔹 React의 두 가지 핵심 가정

1️⃣ 서로 다른 타입의 요소는 다른 트리로 간주한다.

• <div> → <span>처럼 타입이 변경되면 기존 요소와 하위 요소를 모두 새로 생성
• 하지만 같은 타입의 요소라면 변경된 속성만 갱신

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

📌 위 코드에서는 className만 변경되므로, 해당 속성만 업데이트

2️⃣ key 속성을 사용해 리스트 아이템을 효율적으로 비교

• React는 같은 레벨의 자식 요소를 비교할 때 key 값을 활용하여 변경된 요소를 감지
• key가 없으면 리스트의 모든 요소를 다시 렌더링하지만, key를 사용하면 변경된 항목만 갱신

{
    items.map((item) => <li key={item.id}>{item.name}</li>);
}

📌 key가 없다면 전체 리스트를 다시 렌더링하지만, key를 추가하면 변경된 항목만 업데이트

3. Virtual DOM의 장점 & 단점

✅ Virtual DOM의 장점

• DOM 조작 최소화 -> 성능 최적화
• 변경 사항만 반영 -> 불필요한 렌더링 방지
• UI 업데이트 속도 향상

❌ Virtual DOM의 단점

• 메모리 사용 증가 -> Virtual DOM을 유지해야 하기 때문
• 초기 렌더링 시 비교 연산 추가 -> 기존 상태와 비교하는 과정 필요

🔹 결론

• ✔ Virtual DOM은 상태 변경시 UI를 최적화하여 최소한의 업데이트만 수행하는 기술
• ✔ React는 diffing 알고리즘을 통해 Virtual DOM비교를 O(n)으로 최적화하여 성능을 개선
• ✔ key 속성을 활용하면 리스트 렌더링 성능을 더욱 향상시킬수 있음
• ✔ Virtual DOM이 무조건 빠른것은 아니며, 상태 관리 및 최적화 전략이 함께 필요

참고 자료

• [React] 재조정 (Reconciliation)
• [10분 테코톡] 돔하디의 Virtual DOM