Code Your Own Virtual DOM in 100 Lines of JavaScript

Context

React, Vue 등의 프레임워크를 사용하는 개발자들은 Virtual DOM의 동작 원리를 모르고도 개발 가능하지만, 성능 문제나 예측 불가능한 동작 발생 시 근본 원인을 파악할 수 없다. Virtual DOM이 성능 최적화가 아닌 프로그래밍 모델(선언형 UI 기술)이라는 점을 이해하지 못하는 경우가 많다.

Technical Solution

• h() 함수로 가상 노드 생성: 일반 JavaScript 객체({type, props, children})로 DOM 구조를 메모리에 표현하는 하이퍼스크립트 패턴 구현
• render() 함수로 초기 마운트: 가상 노드 트리를 순회하면서 실제 DOM 요소를 생성하여 DOM에 부착
• diff() 함수로 순수 비교: 이전 가상 노드 트리와 새 가상 노드 트리를 위치 기준(인덱스)으로 비교하여 변경 사항을 패치 객체 리스트로 생성(DOM 접근 없음)
• patch() 함수로 최소 변경 적용: diff()에서 생성한 패치 객체들을 실제 DOM 노드에만 적용하여 필요한 부분만 업데이트
• 텍스트 노드 정규화: 문자열/숫자 입력을 자동으로 {type: 'TEXT_NODE', props: {nodeValue}} 형태로 변환

Key Takeaway

4개 함수의 명확한 책임 분리(h는 객체 생성, render는 DOM 생성, diff는 순수 비교, patch는 DOM 변경만)가 코드 이해도와 테스트 가능성을 높인다. 제약된 범위(100줄)가 오히려 핵심만 남기고 각 함수가 정확히 하나의 일만 하도록 강제한다.