가상 DOM

가상 DOM은 리액트, Vue.js, Elm과 같은 선언적 웹 프레임워크에서 사용되는 문서 객체 모델 (DOM)의 경량 자바스크립트 표현이다. 가상 DOM을 생성하는 것은 상대적으로 빠르기 때문에, 어떤 프레임워크든 필요한 만큼 가상 DOM을 상대적으로 저렴하게 다시 렌더링할 수 있다. 그런 다음 프레임워크는 이전 가상 DOM과 현재 가상 DOM 간의 차이점을 찾아 (차이점 계산), 실제 DOM에 필요한 변경 사항만 적용할 수 있다 (조정). 순수 자바스크립트를 사용하는 것보다 기술적으로 느리지만, 이 패턴은 마크업이 상태와 직접 연결되어 있기 때문에 많은 동적 콘텐츠를 포함하는 웹사이트를 작성하기 훨씬 쉽게 만든다.

유사한 기술로는 Ember.js의 글리머(Glimmer)와 앵귤러의 증분 DOM이 있다.

 역사 
자바스크립트 DOM API는 역사적으로 브라우저마다 일관성이 없고, 사용하기 번거롭고, 대규모 프로젝트에 맞게 확장하기 어려웠다. JQuery와 같은 라이브러리가 HTML과의 상호작용의 전반적인 일관성과 사용 편의성을 개선하는 것을 목표로 했지만, 이 역시 변경되는 내용의 본질을 잘 설명하지 못하고 로직과 마크업을 분리하는 반복적인 코드에 취약했다.

2010년 AngularJS의 출시는 더티 체킹 개념을 통해 자바스크립트와 HTML 간의 상호작용에 주요 패러다임 변화를 가져왔다. 이벤트 리스너를 명령적으로 선언하고 제거하며 개별 DOM 노드를 수정하는 대신, 변수의 변경 사항을 추적하고 해당 범위 내의 변수가 변경될 때 DOM의 섹션을 무효화하고 다시 렌더링했다. 이 다이제스트 주기는 로직과 마크업을 더 논리적인 방식으로 결합하는 더 선언적인 코드를 작성하기 위한 프레임워크를 제공했다.

AngularJS가 더 선언적인 경험을 제공하는 것을 목표로 했지만, 여전히 데이터를 DOM에 명시적으로 바인딩하고 감시해야 했고, 수백 개의 변수를 더티 체킹하는 비싼 과정에 대한 성능 문제가 지적되었다. 이러한 문제를 완화하기 위해 리액트는 2013년에 가상 DOM을 채택한 첫 번째 주요 라이브러리였으며, 이는 성능 병목 현상(DOM을 차이점 계산하고 조정하는 것이 상대적으로 저렴했기 때문)과 데이터 바인딩의 어려움(컴포넌트가 사실상 객체에 불과했기 때문)을 모두 제거했다. 가상 DOM의 다른 이점으로는 XSS가 사실상 불가능했기 때문에 보안이 향상되었고, 컴포넌트의 상태가 완전히 캡슐화되었기 때문에 확장성이 향상되었다. 또한 JSX의 등장과 함께 출시되어 XML과 유사한 구문 확장을 통해 HTML과 자바스크립트를 더욱 밀접하게 결합했다.

리액트의 성공에 따라, 2014년 Vue.js와 같이 많은 다른 웹 프레임워크들이 메모리에 이상적인 DOM 표현이라는 일반적인 아이디어를 복사했는데, Vue.js는 JSX 대신 템플릿 컴파일러를 사용했고 프레임워크의 일부로 세분화된 반응성을 내장했다.

최근에는 가상 DOM이 DOM 노드를 차이점 계산하고 조정하는 데 필요한 추가 시간 때문에 느리다는 비판을 받았다. 이는 Svelte와 같이 가상 DOM이 없는 프레임워크와 앵귤러 2와 같이 DOM을 그 자리에서 편집하는 프레임워크의 개발로 이어졌다.

 구현 

 리액트 
리액트는 가상 DOM을 사용하여 컴포넌트를 선언적으로 만드는 것을 개척했다. 가상 DOM 노드는 createElement() 함수를 사용하여 구성되지만, 컴포넌트 작성을 더 인체공학적으로 만들기 위해 종종 JSX에서 트랜스파일링된다. 클래스 기반 리액트에서는 가상 DOM 노드가 render() 함수에서 반환되는 반면, 함수형 훅 기반 컴포넌트에서는 함수의 반환 값 자체가 페이지 마크업 역할을 한다.

 Vue.js 
Vue.js는 상태 변경을 처리하기 위해 가상 DOM을 사용하지만, 일반적으로 직접 상호작용하지 않는다. 대신 컴파일러를 사용하여 HTML 템플릿을 구현 세부 사항으로 가상 DOM 노드로 변환한다. Vue는 JSX와 사용자 정의 렌더 함수 작성을 지원하지만, 빌드 단계가 필요 없기 때문에 템플릿 컴파일러를 사용하는 것이 더 일반적이다.

 Svelte 
Svelte는 가상 DOM을 가지고 있지 않으며, 개발자 리치 해리스는 가상 DOM을 "순수한 오버헤드"라고 불렀다. 런타임에 DOM 노드를 차이점 계산하고 조정하는 대신, Svelte는 컴파일 시간 반응성을 사용하여 마크업을 분석하고 DOM을 직접 조작하는 자바스크립트 코드를 생성하여 성능을 크게 향상시킨다.

 같이 보기 
 섀도 DOM

 각주 

분류:웹 개발
분류:객체 모델