[Vue3] 전역 컴포넌트

Dohee Kang·2023년 3월 4일
0

Vue

목록 보기
16/28

전역 컴포넌트는 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. 전역 등록은 의존 관계를 덜 명확하게 만든다. 만약 대규모 앱에서 전역 컴포넌트를 사용하면 부모 컴포넌트에서 자식(전역) 컴포넌트의 구현을 찾는 것이 어려워진다. 너무 많은 전역 컴포넌트는 유지 보수를 하는데 어려움을 줄 수 있다.

profile
오늘은 나에게 어떤 일이 생길까 ✨

0개의 댓글