Vue.js 간단정리 #8 Vue Components
Intro
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.
컴포넌트란?
화면에서 특정 영역을 레고블럭처럼 모듈화 시킬 수 있게 해주는 것이다.
이를테면 일반적인 웹페이지는 상단부, 내용, 하단부가 있을 수 있다.
이런식으로 쪼개주거나, 아니면 쇼핑몰에서 엄청나게 많은 상품이 리스트로 표기되는데 그 상품을 보여주는 리스트 내부 요소 하나하나가 컴포넌트가 될 수 있다.
컴포넌트 선언법
Vue.component('line', {
template: `<div>안녕하세요.</div>`, // 화면에 표기될 html 태그
data() {
return {
...
}
} // 컴포넌트가 가지는 데이터
})주의점 1. template의 루트 엘리먼트는 하나만 있어야 한다.
아래와 같이 2개 이상의 태그가 루트 엘리먼트가 되면 안된다.
Vue.component('line', {
template: `<div>안녕</div><div>하세요</div>`, // 틀린 예제
...
})주의점 2. data는 오브젝트를 반환하는 함수여야 한다.
그렇지 않은 경우에는 모든 컴포넌트가 같은 데이터를 공유하게 되기 때문에 주의해야 한다.
각각 독립적인 스코프를 갖게 해야 한다.
Vue.component('line', {
template: `<div>안녕하세요.</div>`, // 화면에 표기될 html 태그
data: {
// 틀린 예제
}
})컴포넌트가 받는 데이터 props
특정 매개변수를 내려받아 컴포넌트가 다르게 표기되도록 만들고 싶다면, props를 잘 써야한다.
아래는 color라는 매개변수를 받아서 컴포넌트 태그 내부 글씨의 색상을 지정한 예제이다.
Vue.component('line', {
props: [color],
template: `<div :style="color">안녕하세요.</div>`, // 화면에 표기될 html 태그
data() {
return {
...
}
} // 컴포넌트가 가지는 데이터
})html에서 부를 때 다음과 같이 부르면 props를 보내며 불러지게 된다.
<line color="red"></line>props에 검증 조건 주기
컴포넌트가 갖는 props의 특성에 따라 검증 조건을 부여할 수 있다.
Vue.component('line', {
props: {
message: {
type: String, // 타입 정의 (클래스)
required: true, // 필수 값
default: "red" // 기본 값
}
},
template: `<div :style="color">안녕하세요.</div>`, // 화면에 표기될 html 태그
data() {
return {
...
}
} // 컴포넌트가 가지는 데이터
})직접 코드 작성해보기
컴포넌트가 포함된 코드를 직접 작성해보자.
생각보다 잘 안돼서 삽질을 좀 했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TEST!!</title>
</head>
<body>
<div id="app">
<colorcomponent></colorcomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 앞에 선언해야 함
Vue.component('colorcomponent', {
props: {},
template: `<div>안녕하세요 저는 {{color}}입니다.</div>`,
data() {
return {
color: 'red',
};
},
});
var app = new Vue({
el: '#app',
});
</script>
</body>
</html>주의점 1. 컴포넌트는 Vue의 app 오브젝트보다 앞에 선언해야 한다.
처음에 app 오브젝트보다 뒤에 선언했다가 아래와 같은 에러가 났다.
아마 앞쪽에 컴포넌트들을 코드를 선언해놓고, 선언된 컴포넌트의 코드들을 뷰의 app 오브젝트를 생성하면서 같이 처리하는 것 같다.
주의점 2. data 속성은 항상 함수로
이건 위에 설명했듯 data 속성을 함수로 내보내야 나중에 컴포넌트끼리 같은 data를 공유하지 않는다.
props를 활용해보기
아래 소스코드는 props를 활용한 것이다. 컴포넌트 내부에서도 methods나 computed를 얼마든지 사용할 수 있으니 활용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TEST!!</title>
</head>
<body>
<div id="app">
<colorcomponent></colorcomponent>
<colorcomponent color="blue"></colorcomponent>
<colorcomponent color="green"></colorcomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 앞에 선언해야 함
Vue.component('colorcomponent', {
props: {
color: {
type: String,
required: true,
default: 'red',
},
},
template: `<div>안녕하세요 저는 <span :style="{color:color}">{{color}}</span>입니다.</div>`,
});
var app = new Vue({
el: '#app',
});
</script>
</body>
</html>