모던 프레임워크는 대부분 컴포넌트 기반으로 개발되어있다. 가장 큰 목적과 특징은 재사용성!

전역 컴포넌트 등록 및 사용

스크립트에 컴포넌트를 선언한다

// #app 엘리먼트에 인스턴스 생성
new Vue({
  el: '#app'
});

// app-header라는 이름의 컴포넌트를 teamplate 속성으로 h1 태그를 만든다
Vue.component('app-header',{
  template: '<h1>Header</h1>'
});

전역 컴포넌트 선언에 대한 문법은 다음과 같다

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

위와 같이 컴포넌트를 선언했으면, HTML에 컴포넌트 태그로 사용할 수 있다.

<div id="app">
  <app-header></app-header>
</div>

<!-- 결과 -->
<div id="app">
  <h1>Header</h1>
</div>

실제 프로젝트에서는 전역 컴포넌트 사용할 일이 거의 없다 😅

지역 컴포넌트 등록

뷰 인스턴스에 아래 문법으로 작성한다. 컴포넌트는 객체로 정의하며, 객체 리터럴({}기호) 안에 key, value 형태로 작성한다

components: {
	'컴포넌트 이름': 컴포넌트 내용
	'app-footer': {
	  template: '<footer>footer</footer>'
	}
}

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

• 선언 문법의 차이
• 지역 컴포넌트 (components )를 주로 사용하게 되며, 하단에 어떤 컴포넌트가 있는지 이름으로 바로 알 수 있다
• 지역 컴포넌트를 계속 추가하며 프로젝트를 진행하게 된다
• 전역 컴포넌트는 플러그인이나 라이브러리처럼 전역으로 사용할 컴포넌트를 정의하는데 사용한다

컴포넌트와 인스턴스의 관계

1개의 파일에서 2개의 인스턴스를 생성하고 app2 라고 이름 붙인다.

new Vue({
  el: "#app2"
})