Vue3 #1 [변경된 기능 1 - 전역 API]

Vue3에서 변경된 전역API에 대해서 간단하게 알아봅시다.


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

  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]


들어가며

지난 포스팅에서는 학습 주제 선정에 대한 서론 및 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 목록입니다.

2.x Global API 3.x Instance API
Vue.config app.config
Vue.config.productionTip removed
Vue.config.ignoredElements app.config.isCustomElement
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use

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

  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 사용법에 대해서 포스팅 하겠습니다.

그럼 다음에 뵈요!

참고문서