Virture Dom Diffing 알고리즘이란?

 

1. Virtual DOM이란?

브라우저의 DOM(Document Object Model)은 조작 비용이 비싸고 느립니다. 그래서 React는 렌더링 성능을 높이기 위해 실제 DOM의 가벼운 사본(Virtual DOM) 을 메모리에 유지합니다.

 

2. Diffing 알고리즘이란?

 

 

 

실제 UI에 변화가 생기면 React는 다음 단계를 수행합니다.

1. 새로운 Virtual DOM을 생성
2. 이전 Virtual DOM과 비교(diff) 해서 바뀐 부분 찾기
3. 최소한의 실제 DOM 업데이트 수행

이 “2번 단계”, 즉 두 트리 구조를 비교하는 알고리즘이 바로 Diffing 알고리즘입니다.

 

 

3. 어떻게 작동할까? (React 기준)

DOM 트리 노드를 가장 효율적으로 교체하는 방법은 어떻게 알 수 있을까요?

React는 몇 가지 가정(heuristics) 을 통해 비교 비용을 줄입니다

📌 규칙 1: 서로 다른 타입의 노드는 완전히 교체

<div> → <span>  // 완전히 새로 만듦

📌 규칙 2: 같은 타입의 노드는 속성만 비교

<div className="a" /> → <div className="b" />
// 태그 타입은 같으므로 속성만 바꿈

📌 규칙 3: 자식 노드는 순서대로 비교 (기본적으로는 순차 비교)

<ul>
  <li key="a" />
  <li key="b" />
</ul>
→
<ul>
  <li key="b" />
  <li key="a" />
</ul>

• 이 경우 개발자가 제공해준 프로퍼티인 key를 이용해 효율적인 비교 가능합니다.
• key가 없다면 위치 기준 비교를 하는데 → 매우 비효율적입니다.
  
  

---

4. 왜 필요한가?

• DOM 조작은 느립니다 (특히 모바일에서)
• 매번 전체 DOM을 다시 그릴 수는 없기 때문에,
• 최소한의 변경만 실제 DOM에 적용하여 성능을 최적화합니다