4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
버츄얼 돔은 실제로 실행되기 전에 그 미리 한번 그려보고
그러는 걸로 아는데요 어..
브라우저의 렌더링 과정에 대해서 설명해주세요.
- 답변)
- 의도: 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확인하는 질문.
- 팁: 순서에 관련한 질문이기에 제스처 등 비언어적 표현으로 보조하는 것도 좋습니다.
- 모범 답안: 브라우저의 렌더링 과정은 크게 HTML 파싱 - CSS 파싱 - DOM 트리와 CSSOM 트리 결합 - 레이아웃 계산 - 페인팅 단계로 이루어집니다. HTML을 파싱해 DOM 트리를 만들고, 비슷하게 CSS를 파싱해 CSSOM 트리를 만듭니다. 이후에 두 트리를 결합하고 페이지에 렌더링 하기 위해 필요한 공간을 계산합니다. 마지막으로 레이아웃에 따라 화면에 요소를 페인팅합니다.
DOM : Document Object Model의 약자로, 브라우저가 웹페이지를 어떻게 그릴 것인지에 관한 정보를 가지고 있다.
1. 버츄얼 돔이란?
버츄얼 돔(Virtual DOM)은 주로 웹 개발에서 사용되는 개념으로,
JavaScript 프레임워크와 라이브러리(특히 React)에서 중요한 역할을 합니다.
쉽게 말해, Virtual DOM은 웹 페이지의 UI를 효율적으로 업데이트하고 렌더링하기 위해 사용하는 가상의 DOM 구조입니다.
DOM이란?
DOM(Document Object Model)은 웹 페이지의 구조를 트리 형태로 표현한 객체 모델입니다. 브라우저는 HTML 문서를 로드하면, 이를 DOM 트리로 변환하여 각 요소와 속성들을 관리합니다.
예를 들어, <div>, <p>, <button> 같은 요소들이 DOM의 노드로 존재하게 됩니다. 이 트리를 조작하여 웹 페이지의 내용을 수정하거나 업데이트할 수 있습니다.
Virtual DOM의 역할
기본적으로 DOM은 요소를 추가, 삭제, 변경할 때마다 페이지 전체를 다시 렌더링하기 때문에, 큰 규모의 애플리케이션에서는 성능이 저하될 수 있습니다. Virtual DOM은 이를 해결하기 위해 등장했습니다.
Virtual DOM은 실제 DOM의 사본을 메모리 상에 유지하고,
UI 변경 사항이 발생하면
- Virtual DOM에 변경 사항이 적용됩니다.
- 변경된 Virtual DOM과 기존 Virtual DOM을 비교(diffing)하여 변경된 부분을 식별합니다.
- 변경된 부분만 실제 DOM에 최소한의 조작으로 적용(patching)합니다.
장점
- 성능 최적화: Virtual DOM은 최소한의 DOM 업데이트만 수행하기 때
문에, 전체 페이지를 다시 렌더링하는 것보다 훨씬 빠릅니다. - 프로그래밍 편의성: UI 업데이트와 관리가 간단해지며, 개발자가 특정 DOM 요소를 직접 조작하지 않아도 되기 때문에 코드를 깔끔하게 유지할 수 있습니다.
주요 사용 사례
Virtual DOM은 주로 React와 같은 라이브러리에서 사용되며, 이는 React가 빠르고 효율적으로 UI를 렌더링할 수 있는 중요한 이유 중 하나입니다. Vue.js와 같은 다른 프레임워크도 Virtual DOM을 사용하여 비슷한 성능 최적화를 이룹니다.
따라서, Virtual DOM은 사용자와의 상호작용이 많고 UI가 자주 변경되는 웹 애플리케이션 개발에서 큰 장점을 제공합니다. (e.g. SPA..?)
2. 버츄얼 돔과 리얼 돔의 차이점은?
1. 구조적 차이
-
Real DOM (실제 DOM):
웹 페이지의 실제 구조를 표현하는 객체 모델입니다. HTML 문서를 브라우저가 로드하면, 이를 메모리에 DOM 트리 형태로 저장하고 조작할 수 있게 만듭니다.
예를 들어,<div>, <ul>, <li>같은 HTML 요소들이 트리의 각 노드로 존재하게 됩니다. -
Virtual DOM (가상 DOM):
실제 DOM의 사본을 메모리 상에 가상으로 존재하게 한 것입니다.
주로 JavaScript로 만들어진 객체이며, 실제로 렌더링되지 않으며 브라우저에는 보이지 않습니다.
UI를 변경할 때 변경 사항을 우선 Virtual DOM에 반영한 뒤, 두 개의 Virtual DOM (변경 전과 변경 후)을 비교하여(이 과정을 diffing이라 함) 변경된 부분만 실제 DOM에 업데이트합니다.
2. 업데이트 방식
-
Real DOM:
DOM의 구조가 업데이트될 때마다 전체 트리를 다시 렌더링합니다.
예를 들어, 하나의 노드를 추가하거나 변경해도 전체 DOM 트리가 재렌더링되고, 브라우저가 전체 레이아웃을 재계산하고 다시 그려야 합니다.
이로 인해 렌더링 비용이 높고 성능이 저하됩니다. -
Virtual DOM:
Virtual DOM에 UI 변경 사항이 반영되면, 기존 Virtual DOM과 새로운 Virtual DOM 간의 차이(diff)를 계산하여 변경된 부분만 실제 DOM에 반영합니다.
이 과정은 두 Virtual DOM을 비교하는 Diffing 알고리즘을 사용하여 수행되며, 변경 사항만 찾아내어 최소한의 DOM 업데이트를 진행합니다.
결과적으로, 전체 DOM이 아닌 필요한 부분만 조작하여 성능이 향상됩니다.
3. 성능 차이
-
Real DOM:
대규모 UI 변경이 자주 발생하는 애플리케이션에서는 성능이 매우 저하될 수 있습니다. 예를 들어, 리스트 항목을 추가할 때 전체 리스트가 다시 그려진다면 사용자 경험이 저하됩니다. -
Virtual DOM:
Virtual DOM은 메모리에서 실행되기 때문에 실제 DOM을 직접 조작하는 것보다 훨씬 빠릅니다.
업데이트 비용이 낮고, 많은 UI 변경이 발생해도 효율적으로 렌더링을 관리할 수 있습니다.
4. 사용 예 및 개발자 경험
-
Real DOM:
순수한 HTML, CSS, JavaScript 개발에서는 Real DOM을 직접 조작합니다.
document.getElementById, querySelector, innerHTML 등으로 DOM을 직접 수정하며, 개발자가 직접 DOM 조작 로직을 작성해야 합니다. -
Virtual DOM:
React, Vue.js와 같은 라이브러리나 프레임워크에서 주로 사용됩니다.
개발자는 Virtual DOM을 조작하는 느낌으로 코드를 작성하고, 라이브러리가 내부적으로 Virtual DOM을 Real DOM으로 효율적으로 변환해 줍니다.
이를 통해 개발자는 복잡한 DOM 업데이트 과정을 신경 쓰지 않고도 직관적으로 UI를 업데이트할 수 있습니다.
5. 메모리 사용
-
Real DOM:
DOM 트리는 브라우저 메모리에 직접 저장됩니다.
대규모 페이지의 경우 많은 메모리를 사용할 수 있습니다. -
Virtual DOM:
메모리 사용이 더 효율적입니다. 여러 개의 Virtual DOM 사본을 비교하여 최적화된 결과를 도출하기 때문에 메모리 오버헤드가 있지만, 전체적인 성능 향상과 비교하면 이점이 더 큽니다.
6. 라이브러리의 지원
-
Real DOM:
모든 브라우저에서 기본적으로 제공하는 표준 API입니다.
HTML과 함께 기본적으로 동작합니다. -
Virtual DOM:
React, Vue.js와 같은 라이브러리에서 사용됩니다.
브라우저가 아닌, JavaScript 엔진이 가상의 DOM 트리를 관리하여 성능을 최적화하는 방식입니다.
예시로 보는 차이
// React의 Virtual DOM 예시 (React 코드를 작성하는 경우)
const element = <h1>Hello, world!</h1>; // Virtual DOM에 해당하는 React 요소
// 실제로 이 요소가 브라우저의 Real DOM에 렌더링되면:
<h1>Hello, world!</h1>; // Real DOM에 표시됨
따라서 Virtual DOM은 Real DOM의 성능 한계를 극복하기 위해 고안된 개념으로, 개발자가 효율적으로 웹 애플리케이션을 구축할 수 있게 해주는 중요한 기술입니다.
