뷰 컴포넌트 (Vue Component)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 컴포넌트 (Vue Component)

화면을 구성할 수 있는 블록단위의 특정 영역을 의미합니다.

즉, 컴포넌트를 조합하여 화면을 영역별로 구성할 수 있습니다.

 

뷰 컴포넌트는 트리 구조를 가지고 있습니다. 

• 트리 구조: 각 노드별 부모-자식 관계가 생기는 구조

 

컴포넌트 종류

컴포넌트는 전역 컴포넌트와 지역 컴포넌트로 크게 두종류가 있습니다. 

 

전역 컴포넌트 

여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트로 뷰로 접근 가능한 모든 범위에서 모든 범위에서 사용할 수 있음을  의미합니다.

 

형식

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

• 컴포넌트 이름: template 속성에서 사용할 HTML 사용자 정의 태그 이름

 

예시

<template>
	<global-component></global-component>
</template>

<script>
export default {
	Vue.component('global-component', {
		template: '<div> 전역 컴포넌트 사용 예제 </div>'
	});
}
</script>

<style>
</style>

 

지역 컴포넌트

특정 인스턴스에서만 유효한 범위를 가지는 컴포넌트로 특정 범위에서만 사용할 수 있음을 의미합니다.

 

형식

new Vue({
	components: {
		'컴포넌트 이름': 컴포넌트 내용
    }
});

 

예시

<template>
	<div id="app">
		<local-component></local-component>
	</div>
</template>

<script>
export default {
	var cmp = {
		template: '<div> 지역 컴포넌트 사용 예시 </div>' 
	};
    
	new Vue({
		el: '#app'
		components: {
			'local-component': cmp
		}
	});
}
</script>

<style>
</style>

 

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

전역 컴포넌트는 뷰 인스턴스를 생성할 때마다 인스턴스에 components 속성으로 등록할 필요없이 한번 등록하면 뷰 인스턴스가 접근 가능한 곳 어디든지 접근 및 사용할 수 있습니다.

 

반대로 지역 컴포넌트는 뷰 인스턴스를 생성할 때마다 인스턴스 속성으로 아래 두가지를 꼭 지정해주어야 합니다.

• el 속성: 그려질 화면의 시작점
• components 속성: 화면에 그릴 컴포넌트이자 화면 요소 

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue