Vue3는 현재 총 7편의 시리즈로 구성되어 있습니다.

1. Vue3 #0 [Vue3를 만나다]
2. Vue3 #1 [변경된 기능 1 - 전역 API] (현재글)
3. Vue3 #2 [변경된 기능 2 - v-model]
4. Vue3 #3 [변경된 기능 3 - v-for와 v-if]
5. Vue3 #4 [새로운 기능 1 - Composition API]
6. Vue3 #5 [새로운 기능 2 - Teleport와 Fragments]
7. Vue3 #6 [제거된 기능들]

들어가며

지난 포스팅에서는 학습 주제 선정에 대한 서론 및 Vue3의 달라진 점을 확인하기 위하여 프로젝트를 생성하는 과정까지 진행했습니다. 이번 포스팅에서는 전역 API 관련 내용 중 접하는 빈도가 많다고 생각되는 두가지 내용을 한번 보고자 합니다.

앱 인스턴스

우리가 Vue2 버전에서 글로벌 컴포넌트나 디렉티브를 생성하려면 다음과 같이 작업을 했습니다.

// main.js (vue2)
Vue.component('input-amount', {
  template: `<input type="text" :value="inputValue" />`,
  data() {
    return {
      inputValue: '4',
    };
  },
});

const app = new Vue({
  render: (h) => h(App),
}).$mount('##app');

console.log(app);

// App.vue
<template>
  <div>
    <input-amount></input-amount>
  </div>
</template>;

위 구문을 간단히 풀어 보면 Vue.component라는 전역 API를 활용하여 사용자 컴포넌트를 생성한 뒤, ##app 템플릿에 마운트 시킵니다. app에서는 지역 컴포넌트 사용 선언 없이 해당 컴포넌트를 자유롭게 사용합니다.

위 방법에 에러가 발생한다면 vue.config.js 파일에 다음 코드를 추가합니다. 이유에 대해서는 이 문서를 읽어보세요.

// vue.config.js
module.exports = {
  runtimeCompiler: true,
};

매우 간단한 예제며, 실무에서도 간편하게 등록하여 자주 사용하는 방법인데 , Vue 공식 문서에서는 이 방법이 여러 문제를 야기한다고 하네요. 이유는 이 링크를 통해서 직접 읽어 보시는 것을 추천 드려요. 저는 너무 어려워서.. 아무튼, 그래서 새롭게 앱 인스턴스라는 개념을 도입 했다고 합니다.

import { createApp } from 'vue';

const app = createApp({});

console.log(app);

바로 위 예제에서 console.log를 통하여 app 내부를 들여다보면 기존에 사용했던 Vue 인스턴스와 구조가 비슷함을 느낄 수 있습니다. (이해는 못하겠지만 왠지 느껴지는 것 같은 그런 느낌 적인 느낌)

그럼 이제 앱 인스턴스를 통하여 다음과 같이 컴포넌트를 만들 수 있겠죠.

// main.js (vue3)
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import App from './App.vue';

const app = createApp(App);

app.component('input-amount', {
  template: `<input type="text" :value="inputValue" />`,
  data() {
    return {
      inputValue: '4',
    };
  },
});

console.log(app);

app.mount('##app');

// App.vue
<template>
  <input-amount></input-amount>
</template>;

다음은 공식 홈페이지에서 복붙한 2.x 버전과 매칭되는 전역 API 목록입니다.

관련하여 다음 내용들도 눈여겨 봐야 합니다.

1. Vue.use는 더이상 사용하지 못하기 때문에 앱 인스턴스에서 플러그인을 사용하여 명시적으로 지정(app.use)해야 한다.
2. 앱 인스턴스를 사용하여 Vue root 인스턴스를 마운트한다

createApp(App).mount('##app');

nextTick()

Vue는 데이터 변화가 감지되면 UI를 갱신합니다. 이 과정에서 특정 DOM을 탐색할 필요가 있을 때 nextTick() API를 많이 사용해 보셨을 겁니다. 이 API는 전역으로 사용할 수도 있습니다. 이렇게요.

Vue.nextTick(() => {
  /* ... */
});

이제는 전역에서 사용하고자 한다면 다음과 같이 사용해야 합니다.

import { nextTick } from 'vue';

nextTick(() => {
  /* ... */
});

더 많은 내용

전역 API에 대해서 짤막하게 두가지 언급했습니다. 왠지 가장 빈번하게 사용될 법한 부분만 다루었지만 사실은 더 많은 변경 점들이 있습니다. 공식 홈페이지에 어려운 문장으로 잘 정리가 되어 있으니 한번씩 읽어 보시면 좋을 것 같습니다.

마치며

첫번째 시간으로 전역 API에 관련된 내용을 살펴보았습니다. 전역 API의 경우 앱 구성 단계에서 설계가 들어가고 전반적인 기능을 변경하기 때문에 조심스럽게 개발이 진행되어야 합니다. 전역 구성을 사용하여 개발하시는 경우 변경된 내용을 잘 살펴보고 적용해 봐야겠습니다. 다음에는 변경된 v-model 사용법에 대해서 포스팅 하겠습니다.

그럼 다음에 뵈요!

참고문서

• 공식 홈페이지
• Greenmon.dev: VueJS render 메소드