[Vue3] 전역 컴포넌트

전역 컴포넌트는 app.component() 메서드를 통해 등록할 수 있다.

• 예제를 진행하기에 앞서 components 폴더에 GlobalComponent.vue를 생성하고 아래와 같이 작성한다.

<template>
  <p>Global Component</p>
</template>

• src 폴더에 main.js에 아래와 같이 작성한다.
  • const app = createApp(App)
    • createApp(컴포넌트) : 전달된 옵션은 최상위 컴포넌트를 구성하는데 사용된다.
  • app.component('GlobalComponent', GlobalComponent)
    • app.component(컴포넌트) : 전역 컴포넌트를 등록한다.

import { createApp } from 'vue'
import App from './App.vue'
import GlobalComponent from './components/GlobalComponent.vue';

const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)

// 기존에 있었던 코드
// createApp()한 결과를 public/index.html에 있는 app id의 속성에 할당한다.
app.mount('#app')

📌 전역 컴포넌트를 여러개 등록하고 싶다면 아래와 같이 작성하면 된다.

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

• 전역 컴포넌트를 <script> component 속성에 등록하지 않아도 어디서든 사용할 수 있다.

<template>
  <GlobalComponent />
</template>

📡 전역 컴포넌트는 무분별하게 사용하지 않는 것이 좋다 !
1. 전역 등록은 빌드 시스템이 사용하지 않는 컴포넌트 제거(일명 ‘tree-shaking’)를 방지한다. 컴포넌트를 전역 등록하고 앱의 어느 곳에서도 사용하지 않으면 최종 번들에 계속 포함된다.
2. 전역 등록은 의존 관계를 덜 명확하게 만든다. 만약 대규모 앱에서 전역 컴포넌트를 사용하면 부모 컴포넌트에서 자식(전역) 컴포넌트의 구현을 찾는 것이 어려워진다. 너무 많은 전역 컴포넌트는 유지 보수를 하는데 어려움을 줄 수 있다.