Vue.js에 대해 공부하던 중 전역 컴포넌트와 지역 컴포넌트에 대해 알게 되었습니다.
이 두 개의 컴포넌트가 어떤 차이가 있고 어떤 상황에 사용할 수 있는지 궁금하여, 더욱 자세히 알아보고자 해요!
우선 먼저 vue에서 말하는 컴포넌트란 무엇인지에 대해 알아봅시다.
Vue 컴포넌트란? Vue 인스턴스를 재사용 가능한 코드 블록으로 캡슐화한 것입니다.
컴포넌트는 독립적이고 재사용 가능한 UI 요소를 구성하고 있어요.
또한, 부모-자식 관계를 통해 계층적으로 구성될 수 있으며, 데이터와 이벤트를 통해 상호작용할 수 있습니다.
이제 컴포넌트는 무엇인지 알았으니, 전역 및 지역 컴포넌트에 대해 알아봅시다.
전역 컴포넌트는 Vue 애플리케이션의 모든 인스턴스에서 사용할 수 있는 컴포넌트입니다.
한 번 등록되면, 애플리케이션 어디서나 참조할 수 있어요.
전역 컴포넌트는 여러 뷰 or 페이지에서 동일한 컴포넌트를 사용해야 할 때, 유리합니다.
하지만, 너무 많은 전역 컴포넌트는 네임스페이스를 오염시킬 수 있으며, 애플리케이션의 초기 로딩 시간에 영향을 줄 수 있어요..
전역 컴포넌트 등록 방법은 다음과 같습니다.
Vue.component("컴포넌트 이름", 컴포넌트 내용);
지역 컴포넌트는 특정 컴포넌트 내부에서만 사용할 수 있는 컴포넌트입니다.
부모 컴포넌트 내에서만 참조할 수 있습니다.
코드 분리와 관리가 용이하며, 필요하지 않은 경우, 로딩되지 않으므로 성능 향상에 도움을 줄 수 있어요.
하지만, 여러 컴포넌트에서 사용하려면, 매번 지역 등록을 해줘야 해요..
지역 컴포넌트 등록 방법은 다음과 같습니다.
components: {
"컴포넌트 이름" : 컴포넌트 내용
}
지금까지 전역 컴포넌트와 지역 컴포넌트에 차이에 대해 알아보았습니다.
전역 컴포넌트는 애플리케이션 전반에서 반복적으로 사용되는 컴포넌트에 적합하며, 지역 컴포넌트는 특정 부모 컴포넌트 내에서만 필요한 경우에 사용하면 좋습니다.
참고
reejia님의 전역 컴포넌트와 지역 컴포넌트의 차이
졔하네 가족 이야기님의 Vue.js - 전역/지역 컴포넌트 개념 및 생성
썸네일출처 : https://kr.vuejs.org/v2/guide/components.html