🌳 React의 Virtual DOM 완전 정리

1️⃣ DOM과 Virtual DOM 개념

📌 DOM(Document Object Model)

브라우저가 HTML을 해석해 만든 트리 구조의 객체 모델.

React는 이 DOM을 직접 조작하는 대신, Virtual DOM을 사용해 성능을 최적화함.

📌 Virtual DOM (VDOM)

React가 메모리 안에 유지하는 가상의 DOM 트리.

실제 DOM과 동일한 구조지만 JavaScript 객체로만 존재함.

2️⃣ Virtual DOM이 필요한 이유

DOM 조작은 비용이 높음.

• DOM 트리는 무겁고 복잡함
• 변경될 때마다 브라우저가 Layout → Paint 과정을 수행해야 함
• 작은 변화도 큰 영향을 줄 수 있음

➡️ React는 DOM을 직접 조작하지 않고, **가상의 DOM(Virtual DOM)**을 이용해 변경 사항을 계산한 뒤 최소한의 변경만 실제 DOM에 반영함.

3️⃣ Virtual DOM 동작 과정

🧠 React의 렌더링 절차

1. 상태/props 변경 발생

   → React는 새로운 Virtual DOM을 생성한다.

2. 이전 Virtual DOM과 비교 (Diffing, Reconciliation)

   → 무엇이 바뀌었는지 계산한다.

3. 바뀐 부분만 실제 DOM에 적용

   → DOM 조작을 최소화해 성능 최적화.

4️⃣ Diffing 알고리즘(Reconciliation)

React는 두 개의 Virtual DOM을 비교해 변경된 부분만 찾아냄.

React의 규칙:

• 타입이 동일한 요소는 속성만 비교하고 업데이트
• 타입이 다르면 해당 DOM을 통째로 교체
• 리스트는 key를 이용해 비교 (성능 최적화 핵심)

5️⃣ Virtual DOM의 장점

✔ 불필요한 DOM 조작 최소화

변경된 부분만 실제 DOM에 반영 → 빠른 렌더링

✔ 코드가 더 선언적

개발자는 “UI가 어떻게 보여야 하는지”만 선언하면 됨.

✔ 컴포넌트 기반 구조와 잘 맞음

상태에 따라 UI가 자연스럽게 갱신됨.

6️⃣ 간단한 예시

🤔 만약 Virtual DOM이 없다면?

버튼 클릭 → DOM을 직접 찾아서 → 직접 조작해야 함.

😊 Virtual DOM 사용 시

상태 변경 → React가 자동으로 Virtual DOM을 재구성 → Diffing → 필요 부분만 업데이트.

7️⃣ 아주 간단한 예시 코드

function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      클릭: {count}
    </button>
  );
}

• setCount가 호출되면

  → 새로운 Virtual DOM 생성

  → 이전 Virtual DOM과 비교

  → 숫자 부분만 실제 DOM에서 업데이트됨.

버튼 전체를 다시 만들지 않는다 → Virtual DOM 덕분.

✔ 요약