728x90
반응형
2024.01.23(화)
Vue.js만 사용하다가 React를 따로 공부하면서 DOM에 대해 따로 정리를 해보았다.
DOM이란?
Document Object Model의 약어로, 웹 페이지의 구조를 표현하는 프로그래밍 인터페이스이다. 이는 HTML, XML 등의 문서를 계층 구조로 나타내고, 각 요소에 대한 접근과 조작을 가능케 한다. DOM은 웹 페이지의 동적인 변경이나 조작을 가능케 하며, 자바스크립트와 같은 스크립팅 언어를 통해 조작된다.
가상 DOM(Virtual DOM)이란?
애플리케이션 성능을 최적화하기 위한 기술 중 하나이며, 가상 DOM은 실제 DOM과 동일한 구조를 가지지만 메모리 상에서만 존재하며, 변경 사항을 추적하여 실제 DOM에 일괄적으로 적용함으로써 렌더링 효율을 높인다. 이는 특히 대규모 또는 복잡한 웹 애플리케이션에서 성능 향상을 이끌어낸다.
가상 DOM 사용 프레임워크
가상 DOM을 사용하는 프레임워크 중 대표적인 것은 React이다. React는 컴포넌트 기반 아키텍처를 사용하며, 상태 변화를 감지하여 가상 DOM을 통해 효율적으로 실제 DOM에 반영함.
다음으로 넘어가면, 다음은 Vue.js의 컴포넌트 기반 아키텍처와 리액트와의 차이가 있다. Vue.js는 가상 DOM을 사용하면서도 React와는 다르게 템플릿 기반의 문법을 사용하여 간편하게 컴포넌트를 정의하고 관리할 수 있도록 설계되어 있다. Vue.js는 선언적인 접근 방식과 간결한 문법으로 개발자에게 직관적인 경험을 제공함.
예제
1) DOM예제 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 예제</title>
</head>
<body>
<div id="app">
<p id="demo">DOM 예제</p>
</div>
<script>
// JavaScript를 통해 DOM 조작
document.getElementById("demo").innerHTML = "DOM이 성공적으로 조작되었습니다.";
</script>
</body>
</html>
2) 가상 DOM (React) 예제:
// React와 ReactDOM 라이브러리를 불러옴
import React from 'react';
import ReactDOM from 'react-dom';
// 가상 DOM을 사용하는 React 컴포넌트 정의
class VirtualDOMExample extends React.Component {
constructor() {
super();
this.state = { message: 'React의 가상 DOM 예제' };
}
render() {
return (
<div>
<p>{this.state.message}</p>
</div>
);
}
}
// React 컴포넌트를 실제 DOM에 렌더링
ReactDOM.render(<VirtualDOMExample />, document.getElementById('app'));
3) 가상 DOM (Vue.js) 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 DOM (Vue.js) 예제</title>
<!-- Vue.js CDN 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
// Vue 인스턴스 생성
new Vue({
el: '#app',
data: {
message: 'Vue.js의 가상 DOM 예제'
}
});
</script>
</body>
</html>728x90
반응형
'개발일기' 카테고리의 다른 글
| 09. Vue.js의 라이프사이클 (26) | 2024.03.17 |
|---|---|
| 08. 리액트(React) (63) | 2024.01.25 |
| 06. 자바(Java) 이미지 파일 (60) | 2024.01.22 |
| 05. JSP(JavaServer Pages) (49) | 2024.01.17 |
| 04. 자바스크립트 eval() 함수 (35) | 2024.01.11 |
