캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
컴포넌트 통신
컴포넌트는 구분된 영역을 의미한다.
컴포넌트 영역 간에 포함 관계있으면 부모/자식 컴포넌트라는 관계가 생긴다.
컴포넌트 간에 통신을 하려면 컴포넌트 관계를 기반으로 규칙이 있다.
컴포넌트 마다 각각의 고유한 데이터 유효 범위를 갖는다.
컴포넌트 통신 방식은 '프롭스 속성'과 '이벤트 발생' 으로 구성된다.
이미지 출처 Cracking Vue.js
상위 컴포넌트는 하위 컴포넌트에 데이터를 내려준다. 프롭스 속성
하위 컴포넌트는 상위 컴포넌트에게 이벤트를 올려준다. 이벤트 발생
컴포넌트 통신방식의 이점
데이터가 항상 상위에서 하위로 흐른다는 규칙이 있으므로, 데이터의 흐름을 추적할 수 있다.
이제 Props 속성과 Event 발생을 실습으로 알아보자.
Props 속성
1. 루트인스턴스에 components 와 data 속성 넣기
<body>
<div id="app">
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<h1>header</h1>'
}
// 뷰 인스턴스
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data:{
message: 'hi'
}
})
</script>
</body>뷰 개발자 도구에서 컴포넌트 구조를 확인해보자.
Root 인스턴스 하위에 appHeader 컴포넌트가 속해있다.
Root 인스턴스의 data 속성도 보인다.
2. [Props] data를 app-header 컴포넌트에 내리기
Props를 작성하자.
app-header의 상위 컴포넌트는 Root다.
Root의 하위 컴포넌트는 app-header다.
Props 문법은 아래와 같다.
<div id="app">
<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
</div>app-header의 상위 컴포넌트는 Root다.
Root의 data는 message라는 이름을 갖고 있다.
// 뷰 인스턴스
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data:{
message: 'hi'
}
})하위 컴포넌트인 app-header에는 프롭스 속성 이름을 붙여주는데, propsdata 라고 붙인다.
완성된 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
<app-header v-bind:propsdata="message">/</app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<h1>header</h1>',
props: ['propsdata']
}
// 뷰 인스턴스
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data:{
message: 'hi'
}
})
</script>
</body>
</html>뷰 개발자 도구를 보면, app-header에 'propsdata'라는 이름의 속성이 생겼다.
값은 루트 인스턴스의 data의 message가 가진 값이 그대로 들어가 있다.
모든 객체 정의가 Key-Value 쌍으로 정의되어 있음을 유의하자.
아래처럼 var appHeader를 쓰지 않고, template과 props를 정의해도 똑같이 동작한다.
<body>
<div id="app">
<!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
<app-header v-bind:propsdata="message">/</app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 뷰 인스턴스
new Vue({
el: '#app',
components: {
'app-header': {
template: '<h1>header</h1>',
props: ['propsdata']
}
},
data:{
message: 'hi'
}
})
</script>
</body>다시 정리해보자.
부모 컴포넌트
new Vue()는 Root 컴포넌트. 상위 컴포넌트.
자식 컴포넌트
'app-header'는 자식 컴포넌트. 하위 컴포넌트.
Props 속성
상위 컴포넌트의 데이터를 하위 컴포넌트로 내려준다.
상위 컴포넌트의 데이터는 message 라고 이름붙였다.
하위 컴포넌트의 props 속성을 propsdata 라고 이름붙였다.
Props 문법은 아래와 같다.
<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>app-header 하위 컴포넌트의 프롭스 속성 이름은 propsdata이다.
상위 컴포넌트의 데이터 이름은 message 이다.
<app-header v-bind:propsdata="message">/</app-header>app-header의 props 속성인 propsdata는 Root의 message를 내려받는다.
다음시간에는 실습을 통해 Props를 익혀보자.
