Vue 컴포넌트란?
Vue 공식문서 설명
컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다.
Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다.
뷰에서는 컴포넌트를 사용하여 화면 영역을 구분하여 개발할 수 있다. 컴포넌트는 재사용이 가능하므로, 코드 재사용성이 향상되고, 빠르게 화면 개발이 가능하도록 돕는다.
컴포넌트 등록
전역 컴포넌트
Vue.component('컴포넌트 이름', 컴포넌트 내용);전역 컴포넌트 등록하는 방법은 위와 같다.
전역 컴포넌트는 인스턴스를 생성할 때마다 따로 등록할 필요 없이 사용이 가능하다.
컴포넌트명 표기법
컴포넌트 이름을 표기할 때는 케밥 표기법과 파스칼 표기법 두 가지를 사용할 수 있다.
케밥 표기법으로 컴포넌트를 정의할 경우, 해당 컴포넌트를 호출할 때<my-component>와 같이 반드시 케밥 표기법을 사용해야 한다.
파스칼 표기법으로 컴포넌트를 정의할 경우, 해당 컴포넌트를 호출할 때 케밥(<my-component>)과 파스칼(<MyComponent>) 두 표기법 모두 사용 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
new Vue({
el: '#app'
})
</script>
</body>
</html>실제로 컴포넌트를 등록하고, HTML에 해당 컴포넌트명으로 태그를 입력하면 아래와 같이 컴포넌트 내용으로 입력한 값이 나오는 것을 확인할 수 있다.
주의할 것은 <app-header></app-header> 로 입력했다고 해서 HTML에도 컴포넌트명으로 그대로 나오는 것은 아니라는 점이다.
지역 컴포넌트
전역 등록은 모든 뷰 인스턴스에서 사용 가능하다는 장점이 있지만, 사용하지 않더라도 해당 컴포넌트를 사용자가 내려받게 되어 자바스크립트 양이 불필요하게 커지는 문제점이 생긴다.
사용할 컴포넌트들만 components 옵션을 통해 사용하면 되는데, 이를 지역 컴포넌트라고 한다.
지역 컴포넌트는 하위 컴포넌트에서는 사용이 불가능하다.
지역 컴포넌트를 등록은 다음과 같이 작성하면 된다.
new Vue({
components: {
'app-header': {
template: '<h1>Header Component</h1>'
}
}
});