[JS] Virtual DOM 과 Real Dom 의 차이점

DOM ( Document Object Model ) : HTML 문서를 객체로 표현한 것.

Virtual DOM vs Real DOM

현재 DOM 은 SPA 프레임 워크들의 대세로 인해 Virtual DOM 을 많이 쓰는 추세고, 최근에 뜨는 Svelte 는 Real Dom 을 사용한다고 해서 한번 정리해보았다.

Virtual DOM

Virtual DOM 은 Vue, React 에서 주로 사용된다.

실제 DOM을 건드리지 않고 가상으로 또 하나의 DOM 을 만들어, 현재의 DOM 과 비교 후 차이점 있는 DOM 만 업데이트 하는 방식으로, 이로 인해 Virtual DOM 을 쓰는 언어들의 불변성이 중요하다.

Real DOM

Real DOM 은 옛날 HTML 에서 쓰이다가 현재 Svelte 라는 프레임워크에서 주로 쓰인다고 한다.

옛날에는 DOM 은 한 덩어리라 새로운 업데이트가 생기면 새로운 DOM 을 받아와서 모든 데이터를 다시 불러와야했다면

Svlete 는 값에 대한 DOM 이 정해져 있어서, 값이 바뀌면 특정 id 를 가진 DOM 만 업데이트 해주는 방식을 이용하고 있다.

그래서 React 의 useRef, refs 를 쓰면서 실제 DOM 을 제어하는 것을 피해야하는 것에 비해, Svelte 는 정면 돌파도 가능한 부분이 있다.