[Vue.js] Vue 3의 createApp() 메서드 이해하기

Vue.js 3에서는 애플리케이션을 생성할 때 createApp() 메서드를 사용합니다. 이 메서드는 Vue 애플리케이션을 초기화하고 구성하는 데 사용됩니다. 이를 자세히 알아보겠습니다.

createApp() 메서드란?

createApp() 메서드는 Vue 애플리케이션을 생성하기 위한 진입점 역할을 합니다. 이 메서드를 사용하여 애플리케이션 인스턴스를 만들고 필요한 구성 요소를 추가할 수 있습니다.

예제

아래는 createApp() 메서드를 사용하여 간단한 Vue 애플리케이션을 생성하는 예제입니다.

// Vue 애플리케이션 생성
const app = Vue.createApp({
  data() {
    return {
      message: '안녕하세요, Vue!'
    }
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

// 루트 컴포넌트 등록
app.component('hello-world', {
  template: `
    <button @click="greet">인사하기</button>
  `,
  methods: {
    greet() {
      alert('안녕하세요!');
    }
  }
});

// 애플리케이션 마운트
app.mount('#app');

위 예제에서는 다음과 같은 작업을 수행합니다.

1. createApp() 메서드를 사용하여 Vue 애플리케이션을 생성합니다.
2. data 옵션을 사용하여 애플리케이션의 상태를 정의합니다.
3. methods 옵션을 사용하여 애플리케이션의 메서드를 정의합니다.
4. component 메서드를 사용하여 루트 컴포넌트를 등록합니다.
5. mount() 메서드를 사용하여 애플리케이션을 특정 DOM 요소에 마운트합니다.