DOM이란?
Document Object Model의 약자로 문자 그대로 문서 객체 모델을 뜻한다.
웹 페이지의 구조를 객체로 표현했다고 볼 수 있으며, HTML 및 XML 문서를 계층적인 트리 구조로 표현하는 프로그래밍 인터페이스이다.
즉, DOM은 웹 페이지의 구조를 프로그래밍적으로 조작할 수 있는 역할을 한다고 할 수 있다.
사진을 본다면 DOM의 트리구조를 더 쉽게 이해할 수 있다.
예시를 들어 JavaScript의 DOM 조작을 이해해보자
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello, DOM!</h1>
<button onclick="changeTitle()">Click Me</button>
<script>
function changeTitle() {
document.getElementById("title").innerText = "DOM이 변경되었습니다!";
}
</script>
</body>
</html>
Title의 Hello, DOM!은 h1요소의 title이란 id로 저장되어있다.
그리고 changeTitle()을 통해 title의 id를 가진 document를 동적으로 수정해준다.
DOM에 대한 변경은 즉시 웹 페이지에 반영된다는 의미이다.
이게 DOM의 모든것이다
1. 트리구조 : HTML의 요소를 객체로 나타내고, 트리구조로 표현한다.
2. 라이브특성 : DOM에 대한 변경은 즉시 반영되어 동적인 웹페이지를 만들 수 있다.
3. JavaScript를 통해 조작 가능 : 자바스크립트를 사용하여 DOM 요소를 선택,수정,추가,삭제할수있다.
document.getElementById(id),
element.textContent,
element.addEventListener 등등
하지만 Vue에서는 가상돔을 사용한다는 점에서 조금 다르다.
Virtual DOM이란?
DOM은 브라우저가 DOM을 변경할 때 마다 렌더링과 계산을 수행하여 성능이 저하되는 단점이 있다.
그래서 실제 DOM의 변경사항을 빠르게 파악하고, 반영하기 위한 기술이 필요하게 되었고, 가상 DOM을 만들어 관리하게 되었다.
로 이를 통해 성능을 최적화시킬 수 있다.
동작 원리
실제 DOM과 동일한 구조의 가상 DOM을 메모리에 생성한다
변경 전과 변경 후의 상태를 비교한 뒤, 최소한의 내용만 반영하여 성능 향상을 이끌어 낸다.
Virtual DOM 예제
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">변경</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello, Virtual DOM!"
};
},
methods: {
changeMessage() {
this.message = "Virtual DOM이 적용됨!";
}
}
});
app.mount("#app");
</script>
버튼을 누르면 message가 변경되는 짧은 코드이다.
message가 변경되면 새로운 가상DOM을 생성한다.
기존 가상DOM과 비교하여 변경사항이 있는지 확인한다.
변경된 부분만 실제DOM에 적용시켜준다.
