객체 모델(from2)의 일종인 가상 문서 객체 모델(Virtual-DOM)은 리액트(React)와 뷰(Vue)가 집안의 가구를 훨씬 효율적으로 재배치하기 위해 만들어낸 가구들의 미니어처다.

우리 집에는 가구가 여러 개 있다. 그런데 엄마가 갑자기 가구 배치를 바꾸자고 했다고 생각을 해 보자. 그런데 가구를 배치하기 위해서는 가구들이 서로서로 맞물려 있는 것도 생각해야 하고 콘센트의 위치도 생각해야 한다. 이렇게 고려해야 하는 것들이 많기 때문에, 우리가 선택하는 방식은 가구를 전부 집 밖으로 뺐다가, 하나씩 다시 배치해넣는 것이다.

한편으로는 이러한 과정이 비효율적이라고 생각할수도 있다. 가구들의 미니어처를 만들고, 이들을 먼저 움직여서 어떤 가구들만 움직여야 하는지를 알아내면 일은 훨씬 빠르고 간단해진다.

과거에는(Ajax등의 기술을 이용해) 직접적으로 문서 객체 모델을 조작해서 변경사항을 그려냈었다(from1). 오늘날에도 이러한 본질이 변하진 않았다. 하지만 리액트와 뷰도 마찬가지로 이렇게 ‘전부 들어냈다가 다시 배치하는’ 방식이 비효율적이라고 보았던 것이다. 리액트와 뷰는 문서 객체 모델을 직접적으로 손대기 전, 가상 문서 객체 모델로 최적의 변경 요소들을 다듬어낸다. 그리고 마지막에 이들을 한번에 움직이도록 한다(참고1).

[싱글 페이지 애플리케이션(SPA)과 문서 객체 모델(Document object model (DOM)), 그리고 가상 문서 객체 모델(Virtual-DOM) 사이에는 어떤 관계가 있는가?](https://janghoo.notion.site/SPA-Virtual-DOM-47a95d5dc02c41318a3bbf4c8c16eb60)

parse me : 언젠가 이 글에 쓰이면 좋을 것 같은 재료들.

1. None

from : 과거의 어떤 생각이 이 생각을 만들었는가?

1. [bb7.4_3. title: 클라이언트가 다운로드받은 html 문서를 덮어쓰지 않고 수정하려면 문서 객체 모델(Document object model (DOM))을 이용해야 한다. 정적 웹 페이지가 아닌 모든 웹 페이지는 DOM을 활용하는 것이다.](https://janghoo.notion.site/bb7-4_3-title-html-DOM-47bc9d55714141ce8aeb4069f34512ce)
2. [bb7.4. [entry] title: 객체 모델(Object model): 어떤 개념을 어떤 객체로 찍어낼지 정의하는 뼈대](https://janghoo.notion.site/bb7-4-entry-title-a700bbc2a622476fbda6989bbdeab29a)

supplementary : 어떤 새로운 생각이 이 문서에 작성된 생각을 뒷받침하는가?

1. bb7.4_4.1. title: 뷰(Vue)의 가상 객체 모델(Virtual-DOM) 즉, render 함수가 만드는 템플릿 속성(property)에는 인스턴스 부착(mounted)단계 이후부터 접근 가능하다.

opposite : 어떤 새로운 생각이 이 문서에 작성된 생각과 대조되는가?

1. None