virtual-dom은 diff(트리 차이 계산) 및 patch(DOM 반영) 연산을 통해 효율적인 선언적 렌더링을 구현하는 JavaScript 가상 DOM 모델입니다.
설정 및 모듈 임포트 (Setup & Imports)
const h = require('virtual-dom/h');
const diff = require('virtual-dom/diff');
const patch = require('virtual-dom/patch');
const createElement = require('virtual-dom/create-element');
초기 렌더링 및 실제 DOM 생성
// 1: Create a virtual tree using hyperscript
const tree = h('div', { style: { color: 'blue' } }, ['Hello World']);
// 2: Create a real DOM element node from the virtual tree
const rootNode = createElement(tree);
// 3: Append to document body
document.body.appendChild(rootNode);
차이 계산 및 DOM 패치 (Diff & Patch)
// 4: Create a second updated virtual tree
const newTree = h('div', { style: { color: 'red' } }, ['Hello Updated World']);
// 5: Calculate the diff delta between old and new trees
const patches = diff(tree, newTree);
// 6: Patch the real DOM node in-place
patch(rootNode, patches);