React의 Virtual DOM은 무엇이고, 왜 사용하나요?
한 줄 답변
Virtual DOM은 실제 DOM의 가벼운 복사본으로, 상태 변경 시 새 Virtual DOM을 생성하고 이전 것과 비교(Diffing)하여 실제 DOM에는 변경된 부분만 최소한으로 반영합니다.
핵심 개념 정리
Virtual DOM은 실제 브라우저 DOM을 자바스크립트 객체로 추상화한 것입니다.
브라우저 DOM을 직접 조작하면 리플로우(Reflow)와 리페인트(Repaint)가 발생하여 성능이 저하됩니다. React는 이 문제를 Virtual DOM으로 해결합니다.
동작 원리는 다음과 같습니다: 1. 상태(State)가 변경되면 새로운 Virtual DOM 트리를 생성합니다. 2. 이전 Virtual DOM과 새 Virtual DOM을 비교합니다 (Diffing). 3. 차이가 있는 부분만 실제 DOM에 일괄 반영합니다 (Batch Update).
이 과정을 Reconciliation(재조정)이라고 합니다. O(n) 시간 복잡도의 휴리스틱 알고리즘으로 빠르게 비교합니다.
비교 정리
| 항목 | Virtual DOM | Real DOM |
|---|---|---|
| 업데이트 방식 | 변경분만 일괄 반영 | 매번 전체 리렌더링 |
| 조작 속도 | JS 객체 조작 (빠름) | 브라우저 API 호출 (느림) |
| 메모리 | 추가 메모리 사용 | 추가 오버헤드 없음 |
| 개발 편의성 | 선언적 UI (What) | 명령적 UI (How) |
면접에서 이렇게 답하세요
Virtual DOM이 항상 빠른 것은 아닙니다. 단순한 DOM 조작 하나라면 직접 조작이 더 빠를 수 있습니다. Virtual DOM의 진짜 장점은 '충분히 빠르면서도 선언적 프로그래밍을 가능하게 한다'는 점입니다. key prop이 Reconciliation에서 하는 역할도 함께 설명하면 좋습니다.
자주 묻는 추가 질문
Q. React Fiber는 무엇인가요?
React 16에서 도입된 새로운 Reconciliation 엔진입니다. 기존의 Stack Reconciler는 동기적으로 동작하여 큰 업데이트 시 프레임이 끊겼지만, Fiber는 작업을 작은 단위로 나누어 비동기적으로 처리할 수 있어 사용자 인터랙션 응답성이 좋아졌습니다.
Q. key prop은 왜 필요한가요?
리스트 렌더링 시 React가 각 요소를 식별하기 위해 사용합니다. key가 없으면 순서 기반으로 비교하여 불필요한 리렌더링이 발생합니다. 고유하고 안정적인 값(보통 id)을 사용해야 합니다. index를 key로 쓰면 삽입/삭제 시 버그가 생깁니다.
Q. Svelte는 Virtual DOM 없이 어떻게 동작하나요?
Svelte는 컴파일 타임에 상태와 DOM의 관계를 분석하여, 상태 변경 시 정확히 어떤 DOM을 업데이트해야 하는지 아는 코드를 직접 생성합니다. 런타임 Diffing이 없으므로 번들 크기가 작고 초기 로딩이 빠릅니다.
커뮤니티 하이라이트
“Virtual DOM = 메모장에 먼저 다 쓰고, 달라진 부분만 원본에 옮겨 적는 것. 이렇게 비유하면 비전공자도 바로 이해합니다.”
“면접에서 React.memo, useMemo, useCallback도 Virtual DOM 최적화와 연결해서 설명하면 점수 높게 받았어요.”
52명의 개발자가 이 질문에 참여했습니다
관련 면접 질문
앱에서 직접 답변해보세요
매일 3개의 면접 질문에 답변하고,
다른 개발자들의 답변을 비교해보세요.