[vue3 공식문서 번역]Components.1.Registration

컴포넌트 등록

뷰 컴포넌트는 등록할 필요가 있다 그래서 뷰는 안다 어디에 위치할지  그 구현체가, 템플릿에서 만낫을떄,

 

뷰는 템플릿에서 컴포넌트 구현체가 위치할 장소를 알기위해 등록할 필요가 있다. 전역과 지역으로 컴포넌트를 등록하는 두 가지 방법이 있다.

전역 등록

app.component() 메소드를 사용해서 현재 뷰 애플리케이션에 전역적으로 등록할 수 있다:

import { createApp } from 'vue'

const app = createApp({})

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

SFC를 사용한다면, imported .vue 파일을 등록할 수 있다:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

app.component() 메소드는 체이닝될 수 있다:

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

전역적으로 등록된 컴포넌트는 이 애플리케이션에 모든 컴포넌트의 템플릿에서 사용될 수 있다.

<!-- app안에있는 모든 컴포넌트에서 동작한다 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

모든 하위컴포넌트에도 적용되어서, 이 세가지 컴포넌트들 또한 그 안에서 서로를 사용할 수 있다.

 

지역 등록

편리한 대신, 전역 등록은 몇가지 문제점이 있다:

1. 전역 등록은 사용하지 않는 컴포넌트를 제거하는 빌드시스템을 막는다( also known as 일명 "나무털기"). 만약 컴포넌트를 전역으로 등록하고 앱에 아무데서도 안써도, 최종 배포판에도 포함될것이다.

2. 전역 등록은 거대한 애플리케이션에서 의존성 관계를 덜 명확하게 만든다. 이건 부모컴포넌트가 사용할 자식 컴포넌트의 구현체 위치를 어렵게 만든다. 너무 많은 전역 변수를 사용한 것과 유사하게 장기적인 유지보수에 영향을 끼친다.

 

지역 등록은 현재 컴포넌트로 등록된 컴포넌트의 사용가능성을 제한한다. 의존 관계를 좀더 명확하게 만들고, 나무털기에 좀더 친근하다.

 

<script setup>으로 SFC를 사용할 때, imported 컴포넌트는 자동적으로 지역으로 등록된다:

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

<template>
  <ComponentA />
</template>

SFC를 사용하지 않으면, components 옵션을 사용할 필요가 있다:

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

components 객체안에있는 각각의 프로퍼티는, 컴포넌트의 등록되는 이름이 되는 key이며, 값은 컴포넌트의 구현체를 담을 것이다. 위 예제는 ES2015 프로퍼티 약칭을 사용하며, 이것과 같다:

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

지역적으로 등록된 컴포넌트는 파생 컴포넌트에서도 사용할 수 없다. 이 경우에, COmponentA는 현재 컴포넌트에서만 사용가능하고, 그 자식이나 파생 컴포넌트에서는 안된다.

 

컴포넌트 이름 Casing

가이드 내내, components를 등록할 때 PascalCase 이름들을 사용했다. 그이유는 다음과 같다:

1. PascalCase 이름은 자바스크립트 식별자에 요효하다. 자바스크립트에서 컴포넌트 등록과 import하기 쉽게 만들어준다. 또한 IDE들이 자동완성하기 쉽게 해준다.

2. <PascalCase />는 템플릿에서 네이티브 HTML 엘리먼트 대신에 뷰 컴포넌트를 명백하게 만든다. 커스텀 엘리먼트(web 컴포넌트)로부터 뷰 컴포넌트를 차별되게 한다.

 

이건 string 템플릿이나 SFC와같이 일할 때 추천되는 스타일이다. 하지만, 돔 템플릿 구문분석 주의사항에서 다뤗듯, PascalCase 태그는 돔 템플릿에서는 사용할 수 없다.

 

운좋게, 뷰는 PascalCase를 사용해 등록된 컴포넌트에 kebab-case를 연결(resolving)하는걸 지원한다. MyComponent로서 등록된 컴포넌트가 <MyComponent>나 <my-component> 둘 다를 통해 템플릿에서 참조될 수 있다는 걸 의미한다.

템플릿 소스에 상관 없이 똑같은 자바스크립트 컴포넌트 등록 코드를 사용할 수 있도록 해준다.