[Vue.js] Document 따라하기 - Component Registration

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다.

 

Vue component는 템플릿에서 발견될 때 Vue가 구현할 위치를 알 수 있도록 "등록"해야 한다. Component를 등록하는 방법에는 전역 및 로컬의 두 가지가 있다.

 

Global Registration

app.component() 메서드를 사용하여 현재 Vue 어플리케이션에서 component를 전역적으로 사용할 수 있도록 할 수 있다.

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 등록된 이름
  'MyComponent',
  // 구현
  {
    /* ... */
  }
)

SFC를 사용하는 경우 가져온 .vue 파일을 등록한다.

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

app.component() 메서드는 다음과 같이 연결할 수 있다.

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

전역적으로 등록된 component는 앱 내의 모든 component 템플릿에서 사용할 수 있다.

<!-- 앱 내부의 모든 component 내에서 작동한다. -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

이는 모든 자식 component에도 적용된다. 즉, 위의 ComponentA, ComponentB, ComponentC는 모두 서로의 내부에서도 사용될 수 있다.

Global Registration

Global Registration

Global Registration

 

Local Registration

전역 등록은 편리하지만 다음과 같은 몇 가지 단점이 있다.

1. 전역 등록은 빌드 시스템이 사용하지 않는 component를 제거하는 것(일명 "tree-shaking")을 방지한다. Component를 전역적으로 등록했지만 앱의 어느 곳에서도 사용하지 않더라도 최종 번들에 계속 포함된다.
2. 전역 등록은 대규모 앱에서 종속 관계를 덜 명확하게 만든다. 자식 component를 사용하는 부모 component에서 자식 component의 구현을 찾기가 어렵다. 이것은 너무 많은 전역 변수를 사용하는 것과 유사한 장기적인 유지 관리 측면에 영향을 줄 수 있다.

로컬 등록은 등록된 component의 가용성 범위를 현재 component로만 제한한다. 종속 관계를 더 명확하게 만들고 tree-shaking 하기에 더 친숙하다.

 

로컬 등록은 components 옵션을 사용한다.

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

components 객체의 각 속성에 대해 키는 component의 등록 명이 되고 값은 component의 구현이 포함된다. 위의 예는 ES2015 속성 약칭을 사용하고 있으며 다음과 동일하다.

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

로컬로 등록된 component는 하위 component에서 사용할 수 없다. 이 경우 ComponentA는 현재 component에서만 사용할 수 있으며 하위 component는 사용할 수 없다.

Local Registration

Local Registration

 

Component Name Casing

가이드 문서에서 component를 등록할 때 PascalCase 이름을 사용하는데, 이유는 아래와 같다:

1. PascalCase 이름은 유효한 JavaScript 식별자이다. 이렇게 하면 JavaScript에서 component를 더 쉽게 가져오고 등록할 수 있다. 또한 IDE의 자동 완성 기능도 지원한다.
2. <PascalCase />를 사용하면 템플릿의 기본 HTML element가 아닌 Vue component임을 더 명확하게 알 수 있다. 또한 Vue component를 사용자 정의 element(웹 component)와 구별한다.

이것은 SFC 또는 문자열 템플릿으로 작업할 때 권장되는 스타일이다. 그러나 DOM 템플릿 파싱 주의 사항에서 설명한 것처럼 PascalCase 태그는 DOM 템플릿에서 사용할 수 없다.

 

Vue는 PascalCase를 사용하여 등록된 component에 대한 kebab-case 태그 해석을 지원한다. 즉, MyComponent로 등록된 component는 <MyComponent>와 <my-component>를 통해 템플릿에서 참조될 수 있다. 이를 통해 템플릿 소스에 관계없이 동일한 JavaScript component 등록 코드를 사용할 수 있다.

 

 

관련 Repo

https://github.com/galaxyuliana/VueExercises/tree/master/first-vue-project/src/components/Exercise/13

 

참고 자료

https://vuejs.org/guide/components/registration.html