[React]📘2. Virtual DOM(가상 돔)이란?

0. 들어가면서

이전 포스팅에서 DOM에 대해 공부했다. 그러면 자연스럽게 떠오르는 것은 React에서 사용하는 가상 돔(Virtual DOM)이다. 그래서 이번 포스팅에서는 가상 돔에 대해 알아보고 공부해보는 시간을 가져보겠다.

 

 

 

---

1. Virtual DOM의 개념

• Virtual DOM(가상 DOM)은 실제 DOM의 가벼운 사본
• 변경 사항을 Virtual DOM에서 먼저 계산한 후, 실제 DOM에 최소한의 변경만 적용
• React 등 최신 프레임워크에서 성능 최적화를 위해 활용

 

 

 

---

2. Virtual DOM이 필요한 이유

2.1 실제 DOM의 성능 문제

• DOM 변경 시 리플로우(Reflow) 와 리페인트(Repaint) 가 발생하여 성능 저하
• 요소가 많아질수록 브라우저가 다시 렌더링하는 부담이 커짐

 

2.2 Virtual DOM의 역할

• Virtual DOM은 메모리에서 동작하는 가벼운 객체
• 변경 사항을 비교(Diffing)하여 필요한 부분만 업데이트(Patching)

 

 

 

---

3. Virtual DOM의 동작 원리

1. Virtual DOM 생성: 기존 UI의 Virtual DOM을 생성
2. 변경 사항 반영: 새로운 Virtual DOM과 이전 Virtual DOM을 비교(Diffing)
3. 최소한의 변경 적용: 바뀐 부분만 실제 DOM에 업데이트(Patching)

예제 코드

React에서 Virtual DOM을 활용한 업데이트 방식

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}
export default Counter;

• setCount(count + 1)을 호출하면 Virtual DOM이 변경된 부분을 감지
• 실제 DOM을 직접 조작하지 않고, 바뀐 부분만 렌더링

 

 

 

---

4. Virtual DOM vs 실제 DOM

표를 통해 둘의 차이를 비교한 것이다.

 

비교항목	Virtual DOM	실제 DOM
변경 방식	변경 사항을 비교 후 최소 업데이트	직접 변경 시 전체 렌더링
성능	빠름 (최소한의 DOM 업데이트)	느림 (전체 요소가 다시 렌더링될 수 있음)
사용처	React, Vue 등 최신 프레임워크	전통적인 웹 개발 방식

 

 

 

 

---

5. Virtual DOM의 단점

• Virtual DOM을 비교하는 연산이 추가됨 → 너무 자주 변경되면 오히려 성능 저하
• React의 useState 와 같은 상태 관리를 최적화해야 효율적

 

 

 

---

6. 🔥면접에서 자주 묻는 질문 

 

Q1. Virtual DOM이란 무엇인가요?

✅ 답변:
Virtual DOM(가상 DOM)은 실제 DOM의 가벼운 사본으로, 메모리에서 동작하는 객체입니다. UI 변경 사항을 먼저 Virtual DOM에서 처리한 후, 실제 DOM과 비교(diffing)하여 최소한의 변경만 실제 DOM에 적용합니다. 이를 통해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있습니다.

 

 

Q2. Virtual DOM이 실제 DOM보다 성능이 좋은 이유는?

✅ 답변:
실제 DOM은 변경될 때마다 브라우저가 리플로우(Reflow)와 리페인트(Repaint) 를 수행하기 때문에 성능 부담이 큽니다. 하지만 Virtual DOM은 메모리에서 변경 사항을 먼저 계산한 후, 변경된 부분만 실제 DOM에 반영하는 방식(Patching)을 사용하여 성능을 최적화합니다.

 

 

Q3. React에서 Virtual DOM이 어떻게 작동하나요?

✅ 답변:
React의 Virtual DOM은 다음 3단계로 동작합니다.

1. Virtual DOM 생성 → 상태 변경이 발생하면 새로운 Virtual DOM을 생성
2. Diffing(비교) → 이전 Virtual DOM과 새로운 Virtual DOM을 비교
3. Patching(업데이트) → 변경된 부분만 실제 DOM에 반영

이 과정을 통해 불필요한 DOM 업데이트를 최소화하고 성능을 최적화할 수 있습니다.

 

 

Q4. Virtual DOM이 항상 성능을 개선할까요?

✅ 답변:
항상 그렇지는 않습니다. Virtual DOM을 비교하는 과정(Diffing & Reconciliation) 자체도 연산 비용이 발생합니다. 작은 규모의 프로젝트나 간단한 UI에서는 Virtual DOM보다 직접 DOM을 조작하는 것이 더 효율적일 수도 있습니다. 따라서 Virtual DOM이 가장 효과적인 경우는 복잡한 UI 변경이 자주 발생하는 대규모 애플리케이션입니다.

 

 

Q5. Virtual DOM이 없을 때와 비교하면 어떤 장점이 있나요?

✅ 답변:

• 불필요한 DOM 업데이트를 방지하여 성능이 향상됨
• 변경 사항을 메모리에서 먼저 계산하여 렌더링 최적화

 

Q6. React에서 Virtual DOM을 최적화하는 방법은?

✅ 답변:

1. useMemo / useCallback을 사용하여 불필요한 리렌더링 방지
2. React.memo로 컴포넌트 재렌더링 최적화
3. key 값을 적절히 사용하여 리스트 업데이트 최적화

import React, { memo } from "react";

const Button = memo(({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
});

• memo를 사용하면 props가 변경되지 않는 한 리렌더링이 발생하지 않음