✅ 컴포넌트는 **화면의 영역을 구분**하여 개발할 수 있는 뷰의 기능이다.

컴포넌트 기반으로 ****화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.

컴포넌트 생성 코드 형식

컴포넌트를 생성하는 코드 형식은 아래와 같다.

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

컴포넌트 생성 후 표시하기

위 코드 형식을 참고하여 간단한 앱 헤더 컴포넌트를 만들어보자

Vue.component('app-header', {
	template: '<h1>Header</h1>'
});

위에서 등록한 컴포넌트를 화면에서 표시하려면 아래와 같이 컴포넌트 태그(컴포넌트 이름)를 추가한다.

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

div 태그에 뷰 인스턴스가 생성되어 있다는 가정하에 위 템플릿 코드는 결과적으로 아래와 같이 표시된다.

<div id="app">
  <h1>Header</h1>
</div>