Vue.js에서 **mount**는 Vue 인스턴스나 컴포넌트를 실제 DOM에 연결하거나 삽입하는 과정입니다. Vue 인스턴스나 컴포넌트는 처음에 메모리 상에서만 존재하고, 실제 화면에 표시되기 전에는 "마운트되지 않은" 상태입니다. mount는 이 인스턴스를 DOM에 "마운트"하여 실제 화면에 나타나게 하는 역할을 합니다.
mount의 의미와 사용
Vue에서 mount는 주로 $mount 메서드 또는 Vue 애플리케이션 인스턴스를 생성할 때 사용됩니다.
- $mount 메서드: Vue 인스턴스나 컴포넌트를 특정 DOM 요소에 마운트하기 위해 $mount 메서드를 사용할 수 있습니다. 이 메서드는 Vue 인스턴스를 특정 HTML 요소에 연결하고, 그 요소가 표시되는 시점에 Vue의 데이터와 템플릿이 동적으로 렌더링되도록 합니다.
예시:
const app = new Vue({
data: {
message: 'Hello, Vue!'
},
template: '<div>{{ message }}</div>'
});
// HTML 요소에 마운트
app.$mount('#app');
위 코드에서 #app는 HTML 문서에 존재하는 id="app"인 요소입니다. Vue 인스턴스는 이 요소에 마운트되어 message 데이터를 표시하는 DOM을 렌더링합니다.
2. Vue 3에서 mount: Vue 3에서는 createApp 메서드를 사용하여 애플리케이션을 만들고, 이 애플리케이션을 마운트합니다.
예시 (Vue 3):
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 3!'
};
},
template: '<div>{{ message }}</div>'
});
// 애플리케이션을 HTML 요소에 마운트
app.mount('#app');
Vue 3에서는 createApp을 통해 애플리케이션을 생성하고, mount를 통해 해당 애플리케이션을 지정된 DOM 요소에 마운트합니다.
mount의 역할
- DOM 연결: Vue 인스턴스가 실제 DOM에 연결되어 화면에 표시될 수 있게 됩니다.
- 리액티브 데이터 처리: 마운트가 완료되면 Vue의 반응형 데이터 시스템이 작동하여 데이터 변경에 따라 DOM이 자동으로 업데이트됩니다.
- 템플릿 렌더링: 마운트 후에는 Vue의 템플릿 문법({{ message }} 등)이 HTML로 변환되어 렌더링됩니다.
요약
Vue.js에서 **mount**는 Vue 인스턴스나 컴포넌트를 실제 HTML 요소에 연결하여 애플리케이션을 화면에 표시하는 과정을 의미합니다. 이는 애플리케이션이 DOM에 "삽입"되며, 이후 Vue의 데이터와 템플릿이 동적으로 업데이트되는 기반이 됩니다.
'vue.js' 카테고리의 다른 글
버전별 instance 생성 방식 (0) | 2025.01.06 |
---|---|
Vue Instance, Component (0) | 2025.01.06 |
프레임워크 vs 라이브러리 (0) | 2025.01.06 |
MVVM이란? (mvc,mvp,mvvm비교 포함) (0) | 2025.01.06 |
Vue js 란? (0) | 2025.01.06 |