[Udemy Vue 완벽가이드 Section9] 111. 전역 컴포넌트와 지역 컴포넌트

# 전역 컴포넌트

컴포넌트 등록은 component 메서드를 사용하여 앱에 컴포넌트를 등록한다.

이전의 모든 프로젝트도 이 방법으로 컴포넌트를 등록하였다.

방법 자체에는 아무런 문제가 없지만, 컴포넌트를 등록하는 가장 좋은 방법은 아니다.

더 좋은 대안이 있으므로.

 

## 의미

component 메서드를 사용하여 앱에 컴포넌트를 등록하면, 전역(global) 컴포넌트로 등록된다.

- 전체 Vue앱에서 전역적으로 사용할 수 있다는 의미.

(Global Components: Components you can use anywhere in your Vue app - i.e. in any template.)

- 컴포넌트를 앱의 어디에서나 커스텀 HTML 요소로 사용할 수 있다.

- App.vue 파일 뿐만 아니라 모든 컴포넌트에서 사용할 수 있다.

 

## 장점

- 아주 유용하다. 컴포넌트를 커스텀 요소로 어디에서든 사용할 수 있다는 의미이므로. 어디서 사용할 지 생각할 필요가 없다.

 

## 단점

하지만, 한가지 잠재적인 단점이 있다.

모든 컴포넌트에는 당연히 template, script 코드가 들어있다.

애플리케이션이 커질수록 이 코드들도 점점 커지게 된다. 컴포넌트가 많을수록 코드 패키지도 더 많아진다고 할 수 있다.

그리고 이 컴포넌트들을 모두 전역적으로 등록하면, 애플리케이션이 처음 로드될 때 결국 Vue가 컴포넌트 전부를 로드해야한다는 의미.

브라우저는 처음에 모든 컴포넌트에 대한 코드를 다운로드해야한다.

기본 애플리케이션에선 전혀 문제가 되지 않지만, 더 큰 애플리케이션의 경우 문제가 될 수 있다.

 

게다가 모두 전역적으로 등록하면 main.js에서 아래 코드들이 아주 긴 목록이 된다. 수백 개의 컴포넌트가 들어있는 애플리케이션이라면 굉장히 긴 목록이 된다.

app.component('the-header', TheHeader);
app.component('base-badge', BaseBadge);
app.component('badge-list', BadgeList);
app.component('user-info', UserInfo);

그리고 컴포넌트가 사용되는 위치도 파악하기 어려워진다.

모든 컴포넌트가 여러 곳에서 사용될 수도 있고, 컴포넌트 중 일부는 몇 군데에만 사용될 수도 있다.

 

예를 들어, the-header, user-info 컴포넌트는 실제로 App.vue에서만 사용된다.

한번만 사용되는 컴포넌트를 전역적으로 등록해도 작동은 하지만, 불필요하다고 할 수 있다.

컴포넌트를 가지고 있는건 코드를 아웃소싱하고, App.vue 파일을 간결하게 유지하기 위해서다. 바로 이게 컴포넌트의 개념.

많은 구성 요소들을 결합해서 복잡한 사용자 인터페이스를 구축한다.

 

 

# 지역 컴포넌트

그래서 컴포넌트를 등록하는 다른 방법이 있다.

the-header의 경우, 일단 main.js에서 컴포넌트 등록을 삭제한다.(전역 컴포넌트등록 취소)

import { createApp } from 'vue';

import App from './App.vue';
// import TheHeader from './components/TheHeader.vue';
import BaseBadge from './components/BaseBadge.vue';
import BadgeList from './components/BadgeList.vue';
import UserInfo from './components/UserInfo.vue';

const app = createApp(App);

// app.component('the-header', TheHeader);
app.component('base-badge', BaseBadge);
app.component('badge-list', BadgeList);
app.component('user-info', UserInfo);

app.mount('#app');

 

1/ the-header가 사용되는 App.vue 파일로 가서 script 섹션에서 TheHeader를 './components/TheHeader.vue'에서 불러온다(import).

이제 TheHeader.vue 컴포넌트를 App.vue 옵션 객체에 지역적으로 등록할 수 있다.

 

3/ data, methods, computed 프로퍼티 밑에 'components' 프로퍼티를 추가하자.

이제 App.vue의 템플릿 또는 컴포넌트에서 어느 컴포넌트가 사용될 지를 Vue에 알릴 수 있다.

여기에 등록된 컴포넌트는 App.vue에서만 사용할 수 있다. 다른 컴포넌트나 애플리케이션의 다른 곳이 아니라, 여기 App.vue파일에서만 사용할 수 있다.

 

components는 객체를 취한다. 그래서 key-value 쌍이 필요하다.

- key는 커스텀 HTML 요소가 된다.

- value : 불러온 컴포넌트 구성객체. 포인터로 가리키고 있다.

import TheHeader from './components/TheHeader.vue';

export default {
 components: {
  'the-header': TheHeader,
 }
}

 

이렇게 저장하면 똑같이 작동하지만, 이제 TheHeader은 지역적으로 등록되었다.

 

참고로,

여기서 key를 'the-header'로 써도 되지만, 'TheHeader'를 key로 사용할 수도 있다.

TheHeader로 사용해도 템플릿에서는 'the-header'로 커스텀 HTML요소로 사용할 수 있다.

the-header를 템플릿에서 사용할 수 있게 Vue가 TheHeader를 자동으로 번역한다.

 

만약 템플릿에서 TheHeader를 사용하길 원한다면, 셀프 클로징 태그로 작성할 수도 있다. 파스칼 케이스로 작성하면 셀프클로징태그가 작동한다.

<TheHeader />

 

kebab-case를 사용하면, 셀프 클로징 태그는 지원되지 않는다. 작동하지 않는다.

<the-header /> <!--작동x-->

 

어느 스타일을 사용할지는 본인이 선택하면 된다.

 

TheHeader 부분을 더 간결하게 할 수도 있다. key를 삭제하고, TheHeader를 아래와 같이 전달하면 된다.

프로젝트 설정에서 지원되는 모던 JS 구문기능이 있으므로, 객체에 단일값(TheHeader)만 제공해도 이 구문(TheHeader:TheHeader)으로 확장된다.

components: {
 TheHeader
}

이렇게 지역컴포넌트를 등록하는 방법이 있다.

 

UserInfo,vue, BadgeList.vue도 App.vue 템플릿에서만 사용되는 컴포넌트이다.

이 두 컴포넌트도 똑같이 전역 컴포넌트 등록을 삭제하고, 지역 컴포넌트로 추가해보자.

 

 

 

components 옵션은 App.vue 뿐만 아니라 모든 구성 객체에서 사용할 수 있다.

그 컴포넌트에 포함될 지역 컴포넌트가 있다면, 등록할 수 있다.

 

BaseBadge.vue 컴포넌트는 그대로 전역적으로 구성하자. 이 컴포넌트는 앱의 여러 곳에서 사용하기 때문에 전역 컴포넌트가 더 유리하다.

다양한 곳에서 사용하는 범용 컴포넌트의 경우, 보통은 전역 컴포넌트를 사용한다.

물론 여러 다른 컴포넌트에 지역 컴포넌트로 추가하는 것이 합리적이라면 그렇게 할 수도 있다.

하지만 이런 경우, 보통 전역 컴포넌트를 사용하는게 맞다.

 

반면, 다른 하나의 컴포넌트에서만 사용하는 컴포넌트가 있는 경우, 지역 컴포넌트로 등록하는 것을 고려해보자.

main.js파일을 간결하게 유지할 수 있고, 모든 것을 전역적으로 등록하지 않아도 된다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.