🌱 기초 프론트엔드
Virtual DOM이 뭔가요?
쉽게 이해하기
건축 설계도면을 먼저 그려보는 것과 같아요. 건물(실제 DOM)을 바로 고치는 대신, 도면(Virtual DOM)에서 여러 번 수정하고 최종안을 확정한 뒤 한 번에 시공하는 게 훨씬 효율적이잖아요.
핵심 정리
Virtual DOM은 실제 DOM의 가벼운 복사본으로, 변경사항을 효율적으로 처리하기 위한 중간 단계예요.
자세히 알아보기
React나 Vue 같은 현대적인 프레임워크가 빠른 이유 중 하나가 바로 Virtual DOM 때문이에요. 실제 DOM은 브라우저가 화면을 그리는 구조인데, 이걸 직접 조작하면 속도가 느려요. 특히 여러 곳을 동시에 바꾸면 브라우저가 계속 다시 그려야 해서 성능이 떨어지죠.
Virtual DOM은 JavaScript 객체로 만든 DOM의 가벼운 사본이에요. 상태가 변경되면 먼저 Virtual DOM에서 변경사항을 적용하고, 이전 Virtual DOM과 비교(diffing)해서 실제로 바뀐 부분만 찾아냅니다. 그 다음 변경된 부분만 실제 DOM에 한 번에 적용(reconciliation)해요.
예를 들어 Todo 목록에서 10개 항목 중 3개가 바뀌었다면, Virtual DOM은 정확히 그 3개만 실제 DOM에 반영해요. 전체를 다시 그리지 않기 때문에 훨씬 빠른 거죠. 특히 데이터가 자주 변하는 인터랙티브한 앱에서 효과가 큽니다.
하지만 Virtual DOM이 항상 빠른 건 아니에요. 간단한 화면은 직접 DOM을 다루는 게 더 빠를 수도 있어요. 최근 Svelte 같은 프레임워크는 Virtual DOM 없이도 컴파일 단계에서 최적화해서 빠른 속도를 낸답니다. 중요한 건 Virtual DOM이 아니라, 개발자가 성능 걱정 없이 선언적으로 코드를 작성할 수 있게 해준다는 점이에요.