밸하!

밸로그 여러분 안녕하세요!

오늘의 주제는 바로 virtual DOM입니다!

도대체
Virtual DOM이란 무엇일까요??

직역하자면 가상DOM입니다!
그럼 본격적으로 알아볼까요??

가상DOM이란?

가상 DOM은 이상적인 또는 "가상"UI표현이 메모리에 유지가 되며
ReactDOM과 같은 라이브러리에 의해 "실제"DOM과 동기화 되는 프로그래밍 개념입니다!
=출처 :React 공식문서

쉽게말해
DOM을 추상화한 가상의 객체라고 표현할수있습니다!

그럼 도대체 DOM이란 무엇일까요??

DOM은 Document Object Model의 줄임말로
문서 객체 모델입니다!

즉 브라우저에서 다룰 HTML문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸것입니다!

DOM은 modules 즉 html,css,method등을 제어할수 있는 표준 인터페이스를 제공합니다
즉
웹페이지를 구성하는 요소를 구조화해서 나타낸 개체고 이 객체를 이용해서 웹페이지 구성요소를 제어할수 있습니다 !

그렇다면
이제는 가상DOM을 조금은 이해할수있겠죠?

그럼 왜 가상 DOM일까요??

DOM조작에 의한 렌더링이 비효율적인 문제
특히 SPA특징으로 DOM복잡도 증가에 따른 최적화 및 유지보수가 더 어려워지는 문제가 있습니다!

즉 DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 랜더링을 자주하게되고, 그만큼 PC자원을 많이 소모하게 되는 문제를 해결하기 위한기술입니다!

조금 더 자세히 가볼까요?

저희는 자바스크립트로 DOM에 접근을 할수있습니다
이를 통하여 내용을 바꾸거나 스타일또한도 바꿀수가 있습니다

이 가상DOM을 통해서 해결할수있는것은
DOM을 추상화한 가상의 객체를 메모리에 만들어 놓아 직접적으로 자주 조작하는것이 아닌
가상의 환경에서 조작을 한이후 적용을 시키는 것입니다!

그러나 가상 DOM또한도 한계가 있는데요

바로
react나 vue등을 이용해서 Virtural DOM을 써도 무조건 빠른것이 아니라 똑같은 최적화를 합니다

그렇기에
무조건 virtual DOM을 사용하는것이 아니라 상황에 맞게 사용한다면
훨씬 메모리의 낭비를 줄일수도 있고 이를 통해서 효율도 향상 시킬수있습니다!

오늘의 포스팅은 여기까지 입니다!

오늘도 지식한개쌓아가봐요!

그럼이만 밸~바!