돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다.

개발자 특히 웹 개발자라면 한번쯤은 들어봤을 법한 단어 바로 돔(DOM) 입니다. 현재 웹 프론트엔드라는 세계가 존재할 수 있도록 도와주는 굉장히 중요한 개념입니다. 하지만 말만 들어봤지 정확히 이것이 뭔지 모르는 개발자들도 많이 있습니다. 오늘은 DOM과 Virtual DOM에 대해서 자세히 알아보도록 하겠습니다.

 

---

 

돔(DOM) 이란?

 

웹 개발자 특히 웹 프론트엔드 개발자는 DOM과 친해져야합니다. DOM은 Document Object Model의 줄임말로 번역하면 문서 객체 모델이라는 뜻입니다. 하지만 단어만 들었을 때는 크게 와 닿는게 없습니다. 이 DOM이란 트리 구조로 되어있는 객체 모델로써, Javascript가 getElementbyid()를 같은 함수를 이용하여 HTML문서의 각 요소(li, head같은 태그들)들을 접근하고 사용할 수 있도록 하는 객체 모델입니다.

 

하지만 이 DOM은 트리구조로 되어있어서 이해하기 쉽다는 장점이 있지만, 이러한 구조 덕분에 거대한 DOM 트리에서는 속도 이슈가 발생하였고 지속적인 DOM 업데이트는 잦은 오류와 사용자 인터페이스에 악영향을 끼쳤습니다, 또한 DOM을 제대로 찾지 못한다면 코드를 분석하려고 다시 거대한 HTML을 들여다 봐야 하는 단점이 존재했습니다.

 

이러한 단점을 해결하기 위해 나온것이 바로 가상돔(Virtual DOM)입니다.

 

---

 

가상돔(Virtual DOM)이란??

 

일단 가상돔(Virtual DOM)에 대해서 알아보기전에 한가지 짧은 동영상을 한번 보고 가도록 합시다.

 

출처 PurelyFunctional tv - React and the Virtual DOM

어떠신가요? 잘 이해가되시나요?

위 내용과 비슷하게 기존의 DOM은 많은 일을 수행하다가 버그가 발생하거나 브라우저가 죽는일이 종종 발생했습니다.

이러한 부분을 해결하기 위해 나온것이 곧 가상돔(Virtual DOM) 입니다.

 

즉, 다시 말해 가상돔(Virtual DOM)은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념입니다.

 

 

이러한 패턴을 채택한 Virtual Dom은 실제 DOM보다 가볍고, 빠른 Rendering이 가능하기 때문에 압도적으로 DOM의 부담을 줄여줍니다. 또한 몇가지의 특수 키워드(ref, key, htmlFor)등 조금씩 다른부분이 존재하지만 실제 DOM과 Virtual Dom은 구조상 큰 차이가 없어 이해하기 편하다는 장점이 있습니다. 그렇기 때문에 React 뿐만아니라 Vue또한 이러한 Virtual DOM 방식을 채택하였으며, 앞으로도 지속적으로 성장할 여지가 있는 패턴이라고 생각합니다.

---

 

마치며

 

오늘은 DOM과 Virtual DOM에 대해서 알아보았습니다.

설명이 많이 어렵거나, 틀린 부분, 모르는 부분이 존재한다면 댓글을 달아주세요.

다음에도 더 좋은 정보를 들고 오겠습니다.

읽어주셔서 감사합니다.