1. Vue Component
component란 조합하여 화면을 구성할 수 있는 화면의 특정 영역을 가리키는 블록을 의미합니다.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 재 사용하기도 훨씬 편하게 됩니다.
일반적으로 Vue 화면을 구성할 때는 네비게이션바, 테이블, 리스트, 인풋 상자등과 같이 화면을 잘게 쪼개서 컴포넌트로 관리합니다. 간단하게 도식화된 것을 보죠.
위의 그림에서 알 수 있듯이 컴포넌트의 관계는 tree 구조와 유사합니다.
2. 컴포넌트의 등록
컴포넌트를 등록하는 방법은 크게 전역과 지역 두 가지가 있습니다. 지역 컴포넌트는 특정 component 안에서만 유효한 범위를 가지고 전역 컴포넌트는 application 인스턴스에서 공통으로 사용할 수 있습니다.
2.1 전역 컴포넌트
전역 컴포넌트는 application instance를 이용하여 등록합니다.
전역 컴포넌트를 등록하려면 application instance가 가지고 있는 .component()를 호출하여 수행하면 됩니다.
전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 형식이 있습니다.
컴포넌트 이름은 template 속성에서 사용할 수 있는 HTML 사용자 정의 태그이름을 의미합니다. 이때 태그이름은 가능한 모두 소문자 그리고 단어의 조합으로 되어있을 경우 케밥스타일로 하시는게 좋습니다. 하지만 강제적인 사항은 아닙니다. 파스칼 케이스를 적용할 수 도 있습니다.
두 가지 방법 모두 문제는 없지만, 웹 컴포넌트의 Custom Element 규격의 드래프트를 보면 하이픈으로 연결한 케밥 케이스를 기준으로 하고있습니다.
또한 Vue.js의 스타일 가이드에서는 여러 개의 단어로 구성된 컴포넌트 이름을 사용하는 것을 추천합니다.
그리고 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성합니다. 여기에는 template, data, methods 등의 인스턴스 옵션 속성을 정의할 수 있습니다.
2.2 지역 컴포넌트 등록
지역 컴포넌트의 등록은 전역 컴포넌트의 등록과는 다르게 component에 components 속성을 추가하고 등록할 컴포넌트의 이름과 내용을 정의하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button>일반 버튼이예요!</button>
<global-component></global-component>
<my-local-component></my-local-component>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const app = Vue.createApp({
name: 'App',
data() {
return {
message: '안녕하세요!'
}
},
components : {
'my-local-component' : {
data() {
return {
num : 0
}
},
template: '<div>지역이예요!!</div>'
}
}
})
// 전역컴포넌트를 등록해보아요!
// 첫번째 인자로 컴포넌트의 이름이 와요!
// 기본적으로 두단어 이상으로 구성되고 파스칼 케이스로 작성
// 두번째 인자는 당연히 컴포넌트 객체가 와요!
app.component('global-component',{
data() {
return {
msg: '글로벌이이예요!'
}
},
template: '<div>전역 컴포넌트 사용 : {{ msg }}<div>'
})
const vm = app.mount('#app')
</script>
</body>
</html>
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 06-Vue.js / Directive (0) | 2024.06.09 |
|---|---|
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
| 02-Vue.js / 환경설정 (0) | 2024.06.08 |
| 01-Vue.js / Introduction (0) | 2024.06.08 |
