전역 컴포넌트와 지역 컴포넌트의 차이

Vue.js에 대해 공부하던 중 전역 컴포넌트와 지역 컴포넌트에 대해 알게 되었습니다.

이 두개의 컴포넌트가 어떤 차이가 있고 어떤 상황에 사용할 수 있는지 궁금하여, 더욱 자세히 알아보고자 해요!

 

1. 전역 컴포넌트(Global Components)

전역 컴포넌트는 Vue 애플리케이션의 모든 인스턴스에서 사용할 수 있는 컴포넌트입니다.

한 번 등록되면, 애플리케이션 어디서나 참조할 수 있어요.

전역 컴포넌트는 여러 뷰 or 페이지에서 동일한 컴포넌트를 사용해야 할 때, 유리합니다.

하지만, 너무 많은 전역 컴포넌트는 네임스페이스를 오염시킬 수 있으며, 애플리케이션의 초기 로딩 시간에 영향을 줄 수 있어요..

 

전역 컴포넌트 등록 방법은 다음과 같습니다.

Vue.component("컴포넌트 이름", 컴포넌트 내용);

 

2. 지역 컴포넌트(Local Components)

지역 컴포넌트는 특정 컴포넌트 내부에서만 사용할 수 있는 컴포넌트입니다.

부모 컴포넌트 내에서만 참조할 수 있습니다.

코드 분리와 관리가 용이하며, 필요하지 않은 경우, 로딩되지 않으므로 성능 향상에 도움을 줄 수 있어요.

하지만, 여러 컴포넌트에서 사용하려면, 매번 지역 등록을 해줘야 해요..

 

지역 컴포넌트 등록 방법은 다음과 같습니다.

components: {
  "컴포넌트 이름" : 컴포넌트 내용
}

 

3. 정리하며

지금까지 전역 컴포넌트와 지역 컴포넌트에 차이에 대해 알아보았습니다.

전역 컴포넌트는 애플리케이션 전반에서 반복적으로 사용되는 컴포넌트에 적합하며, 지역 컴포넌트는 특정 부모 컴포넌트 내에서만 필요한 경우에 사용하면 좋습니다.

 

참고

freejia님의 전역 컴포넌트와 지역 컴포넌트의 차이

졔하네 가족 이야기님의 Vue.js - 전역/지역 컴포넌트 개념 및 생성