티스토리 뷰
컴포넌트란?
컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있으며, 코드를 쉽게 이해하고 재사용할 수 있다.
컴포넌트 등록하기
컴포넌트를 등록하는 방법은 전역(Global)과 지역(Local)의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고, 전역 컴포넌트는 모든 범위의 여러 인스턴스에서 공통으로 사용할 수 있다.
전역 컴포넌트 등록
전역컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 아래와 같은 형식으로 Vue 생성자에서 .component() 를 호출하여 수행하면 된다.
<!-- 전역 컴포넌트 등록 형식 -->
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그(HTML 표준 태그들 이외에도 개발자가 직접 정의하여 사용할 수 있는 태그)이름을 의미한다.
컴포넌트 내용에는 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성하며, template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.
Vue.component()로 전역 컴포넌트 1개를 등록하고 화면에 그리는 예제를 살펴보자.
<html>
<head>
<title>Vue Component Registration</title>
</head>
<body>
<div id="app>
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('my-component', {
template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>위 예제와 같이 전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호{} 안에는 HTML 태그가 실제로 화면에서 그려질 때 표시될 내용을 작성해야 한다. 이 예제에서는 컴포넌트 이름을 my-component로 지정했고, 컴포넌트 내용으로는 template 속성을 정의하고 ‘전역 컴포넌트가 등록되었습니다.’라는 텍스트를 포함한 <div> 태그를 작성했다.
따라서 이 컴포넌트를 아래와 같이 HTML에 추가하면 최종적으로 컴포넌트가 등록된다.
<my-component></my-component>그리고 등록된 my-component 컴포넌트는 실제로 화면에 아래와 같이 그려진다.
<div>전역 컴포넌트가 등록되었습니다.</div>지역 컴포넌트 등록
지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다. 등록 형식은 아래와 같다.
<!-- 지역 컴포넌트 등록 형식 -->
new Vue({
components: {
'컴포넌트 이름': 컴포넌트 내용
}
});컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 내용을 의미한다.
그럼, 다음 예제로 지역 컴포넌트를 등록하는 방법을 살펴보자.
...
<script>
var cmp = {
// 컴포넌트 내용
template: '<div>지역 컴포넌트가 등록되었습니다.</div>'
};
new Vue({
el: '#app',
components: {
'my-local-component': cmp
}
});
</script>변수 cmp에는 화면에 나타낼 컴포넌트 내용을 정의했다. 컴포넌트 내용에 template, data, methods 등 여러 가지 속성이 들어갈 수 있지만 여기서는 간단히 template 속성만 정의하고, 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정했다.
그리고 HTML에 <my-local-component> 태그를 추가하여 컴포넌트를 화면에 나타낸다.
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component>
</div>전역 컴포넌트와 지역 컴포넌트의 차이
전역 컴포넌트와 지역 컴포넌트는 인스턴스의 유효범위가 다르다. 다음 코드를 살펴보자.
...
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
...
<script>
// 전역 컴포넌트 등록
Vue.component('my-global-componet', {
template: '<div>전역 컴포넌트입니다.</div>'
});
// 지역 컴포넌트 내용
var cmp = {
template: '<div>지역 컴포넌트입니다.</div>'
};
new Vue({
el: '#app',
// 지역 컴포넌트 등록
components: {
'my-local-component': cmp
}
});
</script>
...위 코드는 인스턴스 하나를 생성하여 my-global-component 전역 컴포넌트와 my-local-componet 지역 컴포넌트를 등록하고 화면에 나타내는 예제이다. 코드를 실행하면 두 컴포넌트 모두가 결과 화면에 나타난다.
이번에는 인스턴스를 하나 더 생성하고 해당 인스턴스에서 지역, 전역 컴포넌트를 모두 표시해보자.
...
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<hr>
<div id="app2">
<h3>두 번째 인스턴스 영역<h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
...
<script>
// 전역 컴포넌트 등록
Vue.component('my-global-componet', {
template: '<div>전역 컴포넌트입니다.</div>'
});
// 지역 컴포넌트 내용
var cmp = {
template: '<div>지역 컴포넌트입니다.</div>'
};
new Vue({
el: '#app',
// 지역 컴포넌트 등록
components: {
'my-local-component': cmp
}
});
// 두 번째 인스턴스
new Vue({
el: '#app2'
});
</script>
...HTML에 <div id="app2"> 태그를 하나 더 추가하고, 인스턴스도 하나 더 추가했다. 그리고 <div id="app2">태그에 전역, 지역 컴포넌트를 모두 등록하였다. 첫 번째 인스턴스 영역과 두 번째 인스턴스 영역을 구분하기 위해 <hr> 태그를 사용했다.
첫 번째 인스턴스 영역에는 전역, 지역 컴포넌트가 모두 정상적으로 나타나지만 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타난다. 그러나 지역 컴포넌트는 나타나지 않고, 개발자도구 콘솔 탭을 보면 지역 컴포넌트 태그를 인식하지 못하여 오류가 발생하는데 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문이다.
전역 컴포넌트는 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다. 반대로 지역 컴포넌트를 사용하기 위해서는 새 인스턴스를 생성할 때마다 등록해야 한다.
'JavaScript > Vue.js' 카테고리의 다른 글
| Vue.js 슬롯 (slot) 정리 (0) | 2021.08.08 |
|---|---|
| Vue Router :: Router 인스턴스와 Route 객체 비교 (0) | 2021.08.08 |
| VUE.JS의 EVENT 처리 (0) | 2019.07.27 |
| [Vue.js] 뷰 인스턴스 (0) | 2019.01.14 |
| [Vue.js] 뷰 템플릿 (0) | 2019.01.13 |
- Total
- Today
- Yesterday