Virtual Dom(Virtual Document Object Model)
- Virtual Dom은 자바스크립트 객체로 메모리에 가상으로 존재하는 DOM 트리의 일종이다.
- 실제 DOM의 경량화된 복사본이며, DOM 조작의 효율성을 높이기 위해 사용된다.
- 이는 특히 React와 같은 현대적인 프런트엔드 라이브러리에서 널리 사용된다.
실제 DOM
- DOM은 HTML 문서의 구조를 계층적(Tree)으로 표현한 모델이다.
- 각 HTML 태그에는 DOM 트리의 노드로 표현되며, 웹 페이지의 내용을 변경하거나 조작하는 작업은 DOM을 통해 이루어진다.
단점
- 실제 DOM 조작은 비용이 많이 든다.
- DOM을 변경할 때마다 브라우저는 레이아웃, 페인트, 리플로우 등의 작업을 수행하며, 이는 성능에 큰 영향을 미칠 수 있다.
Virtual Dom
- Virtual Dom은 이러한 성능 문제를 해결하기 위해 고안된 개념이다.
- Virtual Dom의 핵심 아이디어는 실제 DOM을 직접 조작하는 대신, 변경 사항을 메모리에 있는 가상 DOM에서 먼저 적용하고, 실제 DOM과의 차이를 최소화된 연산을 통해 한 번에 반영하는 것이다.
Virtual DOM 트리 생성
- 애플리케이션 상태가 변경되면, 새로운 Virtual DOM 트리가 생성된다.
Diffing
- 새로운 Virtual DOM 트리와 이전 상태의 Virtual DOM 트리를 비교(differencing)하여 변경된 부분을 찾는다.
Patch
- 실제 DOM에 최소한의 변경사항만 적용하여 업데이트한다.
Virtual DOM의 장점
- 성능 최적화
- Virtual DOM은 여러 변경 사항을 메모리에서 한 번에 처리한 후, 실제 DOM에 최소한의 변경만 적용하여 성능을 최적화한다.
- 이는 특히 대규모 애플리케이션에서 효율적이다.
- 추상화
- Virtual DOM은 DOM 조작을 추상화하여 개발자가 직접 DOM을 다루지 않아도 되도록 한다.
- 이는 코드의 가독성과 유지보수성을 높여준다.
- 일관성 유지
- Virtual DOM을 사용하면 애플리케이션 상태와 UI의 일관성을 쉽게 유지할 수 있다.
React와 Virtual DOM
- React는 Virtual DOM을 효과적으로 활용하는 프레임워크 중 하나이다.
- React의 컴포넌트 기반 아키텍처는 상태 변화에 따라 Virtual DOM을 업데이트하고, 이를 실제 DOM에 효율적으로 반영한다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
위의 예제에서 'useState' 훅은 상태를 관리하며, 상태가 변경될 때마다 React는 새로운 Virtual DOM을 생성하고, 변경된 부분만 실제 DOM에 반영한다.
요약
- Virtual DOM은 실제 DOM의 가벼운 복사본으로 메모리에 존재하며, 효율적인 DOM조작을 가능하게 한다.
- Diffing 알고리즘을 사용하여 Virtual DOM과 실제 DOM간의 차이를 계산하고, 변경 사항을 최소화하여 성능을 최적화한다.
- React와 같은 프레임워크에서 주로 사용되며, 개발자의 생산성을 높이고 애플리케이션의 성능을 향상시킨다.
'코드 > React' 카테고리의 다른 글
[React] 반응형 웹개발 가이드라인(Custom Hook) (3) | 2024.10.14 |
---|---|
class를 안쓰고 className을 쓰는 이유 (0) | 2024.06.20 |
생명주기(Lifecycle) (0) | 2024.06.20 |
React에서 Audio 사용하기 (0) | 2024.02.28 |