vue.js 에서 mount 란?

Vue.js에서 **mount**는 Vue 인스턴스나 컴포넌트를 실제 DOM에 연결하거나 삽입하는 과정입니다. Vue 인스턴스나 컴포넌트는 처음에 메모리 상에서만 존재하고, 실제 화면에 표시되기 전에는 "마운트되지 않은" 상태입니다. mount는 이 인스턴스를 DOM에 "마운트"하여 실제 화면에 나타나게 하는 역할을 합니다.

mount의 의미와 사용

Vue에서 mount는 주로 $mount 메서드 또는 Vue 애플리케이션 인스턴스를 생성할 때 사용됩니다.

1. $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의 데이터와 템플릿이 동적으로 업데이트되는 기반이 됩니다.