뷰 컴포넌트란,
화면에서 영역을 구분하여 개발할 수 있는 뷰의 기능이다.
각각 구분된 구분을 컴포넌트라고 부른다.
컴포넌트는 오른쪽 그림처럼, 컴포넌트들이 생성되면 컴포넌트'간'의 관계가 생긴다.
#전역 컴포넌트
1. 뷰 인스턴스를 생성하면 가장 먼저 Root 컴포넌트가 생긴다.
2. 아래와 같이 헤더, 컨텐츠 컴포넌트를 생성해준다.
<body>
<div id="app">
<app-header></app-header> <!-- 사용자가 정의한 태그 : Vue.component로 정의해줌. -->
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue.component('컴포넌트 이름', 컴포넌트 내용);
Vue.component('app-header',{
template: '<h1>Header</h1>'
});
Vue.component('app-content',{
template: '<div>content</div>'
})
new Vue({
el: '#app'
});
</script>
</body>3. 결과물
위와 같이 AppHeader 컴포넌트와 AppContent 컴포넌트라는 전역 컴포넌트가 생긴 것을 확인할 수 있다.
#지역 컴포넌트
뷰 인스턴스 생성 후 Vue.component('컴포넌트명', 컴포넌트 내용)으로 속성을 추가해주는 것이 아니라, 인스턴스 생성 시점에 컴포넌트 속성을 정의해 줄 수 있는 방법도 있다.
<body>
<div id="app">
<app-header></app-header> <!-- 사용자가 정의한 태그 : Vue.component로 정의해줌. -->
<app-content></app-content>
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue.component('컴포넌트 이름', 컴포넌트 내용);
Vue.component('app-header',{
template: '<h1>Header</h1>'
});
Vue.component('app-content',{
template: '<div>content</div>'
})
new Vue({
el: '#app',
components: {
//컴포넌트 이름 : 컴포넌트 내용을 넣어줌.
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
</script>
</body>
지역 컴포넌트 footer가 생성된 것을 확인할 수 있다.
아니 근데 전역 컴포넌트(Component) 지역 컴포넌트(Components) 어짜피 루트 밑에 생기는건 똑같은데 왜 나눠서 등록을 하는 것인지?
보통 실무에서는 전역컴포넌트는 라이브러리 형태로 임포트해서 사용하고,
지역컴포넌트는 특정 화면에서 계속 속성을 더해가며 사용하기 떄문에 어떤 컴포넌트들이 사용되었는지 한눈에 보기 용이하다.
#컴포넌트와 인스턴스와의 관계
id가 app인 div와, id가 app2인 div를 각각 하나씩 만들고, 각각의 태그에 Vue 인스턴스를 할당해주었다.
<body>
<div id="app">
<app-header></app-header> <!-- 사용자가 정의한 태그 : Vue.component로 정의해줌. -->
<app-footer></app-footer>
</div>
<div id="app2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue.component('컴포넌트 이름', 컴포넌트 내용);
Vue.component('app-header',{
template: '<h1>Header</h1>'
});
new Vue({
el: '#app',
components: {
//컴포넌트 이름 : 컴포넌트 내용을 넣어줌.
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
new Vue({
el : '#app2'
});
</script>
</body>이때, 뷰 인스턴스가 생성될 때마다 Root 컴포넌트가 생성되기 때문에 컴포넌트 구성은 아래와 같아진다.
엇 그런데 두번째 Root 밑에 AppHeader 컴포넌트가 생겼다.
그 이유인 즉슨, 전역컴포넌트로 생성된 App Header는 뷰의 인스턴스가 생성될 때 마다 자동으로 Root 컴포넌트 아래에 생성되고,
지역컴포넌트로 생성된 AppFooter는 매번 뷰의 인스턴스 내에 정의를 해줘야 한다.
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 06. 뷰 라우터 (0) | 2022.01.20 |
|---|---|
| Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법 (0) | 2022.01.19 |
| Vue.js 시작하기 04. 컴포넌트 통신방식 (0) | 2022.01.19 |
| Vue.js 시작하기 02. 인스턴스 (0) | 2022.01.17 |
| Vue.js 시작하기 01. MVVM 모델에서의 뷰 (0) | 2022.01.17 |