메모리 속의 가짜 DOM

이론적인 돌파구는 마련되었다. 이제 조던 워크의 아이디어를 실제로 구현할 차례였다. 그의 새로운 라이브러리의 심장부에는, 그가 지금까지 ‘가짜 DOM’ 혹은 ‘UI 설명서 객체’라고 다소 모호하게 불러왔던 핵심 데이터 구조가 자리 잡아야 했다.

팀 내부에서는 이 개념을 어떻게 부를지 의견이 분분했다. 누군가는 ‘섀도우 DOM(Shadow DOM)’이라고 불렀지만, 이는 당시 브라우저 표준으로 논의되던 다른 기술과 혼동을 줄 수 있었다. 누군가는 ‘UI 디스크립터 트리(UI Descriptor Tree)’라는 장황한 이름을 제안하기도 했다.

조던은 좀 더 직관적이고 강력한 이름이 필요하다고 생각했다. 그는 이 데이터 구조의 본질에 집중했다.

‘이것은 실제 DOM이 아니다. 하지만 실제 DOM의 모든 구조와 속성을 그대로 흉내 내고 있다. 실제가 아닌, 가상의 존재다.’

“버추얼 DOM(Virtual DOM)이라고 부릅시다.”

조던이 제안한 이름은 즉시 팀원들의 공감을 얻었다. ‘가상의 문서 객체 모델’. 그 이름에는 아이디어의 핵심이 정확히 담겨 있었다.

버추얼 DOM은 단순했다. 그 실체는 createDescription 함수가 반환하던, 중첩된 자바스크립트 객체에 불과했다.

// 버추얼 DOM 노드의 모습
{
  tagName: 'div',
  properties: { className: 'profile' },
  children: [
    {
      tagName: 'img',
      properties: { src: 'avatar.jpg' },
      children: null
    },
    {
      tagName: 'p',
      properties: { className: 'username' },
      children: ['Jordan Walke']
    }
  ]
}

이 객체의 가장 큰 장점은 가볍다는 것이었다. 실제 브라우저의 DOM 노드는 수많은 속성과 메서드를 가진 무거운 객체다. 이벤트 리스너, 스타일 정보, 레이아웃 계산 결과 등 복잡한 정보들이 얽혀있다.

하지만 버추얼 DOM 노드는 순수한 데이터 덩어리였다. tagName, properties, children 이라는 세 가지 정보만 가진, 지극히 단순한 자바스크립트 객체. 생성하고, 읽고, 비교하고, 버리는 모든 과정이 메모리 안에서 눈 깜짝할 사이에 이루어졌다.

조던은 이 버추얼 DOM을 활용한 전체 작업 흐름을 명확하게 정의했다.

1단계: 생성 (Creation)

• 데이터가 변경되면, render 함수들이 다시 실행되어 완전히 새로운 버추얼 DOM 트리를 메모리에 생성한다. 이 과정은 매우 빠르다.

2단계: 비교 (Diffing)

• 라이브러리는 새로 생성된 버추얼 DOM 트리와, 이전에 메모리에 저장해 두었던 옛날 버추얼 DOM 트리를 비교한다. 이 비교 알고리즘이 바로 조던이 제안한, 두 가지 가정을 기반으로 한 O(n) 복잡도의 효율적인 알고리즘이다.
• 비교 결과, ‘변경점 목록(List of Changes)’이 만들어진다. 예를 들어, ['p 태그의 텍스트를 'Jordan Walke'로 변경하라', 'img 태그의 src 속성을 'new_avatar.jpg'로 교체하라'] 와 같은 구체적인 지시사항 목록이다.

3단계: 반영 (Reconciliation)

• 라이브러리는 이 변경점 목록을 들고, 비로소 처음으로 느리고 무거운 실제 DOM에 접근한다.
• 그리고 목록에 적힌 지시사항들을 가능한 한 가장 효율적인 방법으로, 일괄적으로 실제 DOM에 적용한다.

이 세 단계의 분리를 통해, 개발자는 버추얼 DOM이라는 추상화 계층 뒤에 숨을 수 있게 되었다. 개발자는 더 이상 실제 DOM의 복잡함이나 성능 문제를 고민할 필요가 없었다. 그저 데이터를 바꾸고, 새로운 버추얼 DOM을 생성하는 render 함수를 작성하기만 하면 됐다.

가장 더럽고, 어렵고, 오류 나기 쉬운 ‘비교’와 ‘반영’의 과정은 전부 버추얼 DOM과 라이브러리가 알아서 처리해 줄 터였다.

맷은 이 구조를 보며 감탄했다.
“이건… 개발자를 위한 완벽한 방패막이군요. 실제 DOM이라는 예측 불가능한 야생의 세계로부터 우리를 보호해 주는.”

그렇다. 버추얼 DOM은 단순한 성능 최적화 기술이 아니었다. 그것은 개발의 패러다임을 바꾸는, 거대한 추상화의 발명이었다.