이번엔 Vue의 컴포넌트에 관해 정리하려고 한다.
Vue는 한 화면의 여러 요소를 단위별로 나눌 수 있다. 나뉜 하나의 단위를 Component라고 한다.
이렇게 하나의 화면을 크게 3개의 컴포넌트로 나누고, 나뉜 컴포넌트에 또 세세하게 나눌 수 있다.
컴포넌트라는 특징으로 중복된 요소를 제거하고, 재사용성이 올라가며, 작업의 능률이 향상된다.
- 전역 컴포넌트
- 지역 컴포넌트
컴포넌트는 위 2개로 구분하여 사용할 수 있다.
단어 뜻 그대로
모든 곳에서 사용할 수 있는 컴포넌트가 전역,
특정한 곳에서만 사용 가능한 컴포넌트가 지역이다.
프로젝트를 진행하며 느끼고 강의에서도 들었던 것처럼
전역 컴포넌트는 주로 플러그인, 라이브러리 등 여러 곳에서 사용하는 것들만 사용하고,
대부분 지역 컴포넌트를 사용한다. (주로 하위 컴포넌트를 등록할 때 사용)
그렇다면 컴포넌트 끼리는 어떤 방식으로 통신 할까?
컴포넌트의 통신 방식 props, event emit
- props : 상위컴포넌트의 데이터를 하위 컴포넌트로 전달하기 위해 사용
- emit : 하위 컴포넌트의 데이터를 특정 이벤트를 발생시켜 상위 컴포넌트에 전달하기 위해 사용.자세한 사용 방법은 코드를 보며 얘기 하겠다.
<div id="app">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:increase="increaseNumber"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<p>{{ propsdata }}</p>',
props: {
propsdata: Number
}
}
var appContent = {
template: '<button @click="addNumber">add</button>',
methods: {
addNumber() {
this.$emit('increase');
}
}
}
var vm = new Vue({
el: "#app",
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 0
},
methods: {
increaseNumber() {
this.num++;
}
}
});
</script>위 코드는 add버튼을 클릭하면 숫자가 1씩 증가하는 코드이다.
우선 add버튼은 app-content에 생성한다.
add버튼을 클릭하면 addNumber라는 메소드가 실행되고 this.$emit('increase')를 통해
@increase라는 사용자 정의 이벤트가 발생되고 상위 컴포넌트의 increaseNumber() 메소드와 연결되어 해당 메소드가 실행된다.
increaseNumber() 메소드에서는 data로 정의된 num을 1 증가시킨다.
증가됨과 동시에 app-header에 props로 정의된 propsdata에 v-bind를 이용하여 값을 binding시킨다.
app-header에서는 props로 받은 propsdata를 화면에 표현하게 된다.
이렇게 상위 컴포넌트와 하위 컴포넌트의 데이터 통신 방식에 대해 알아보았다.
그런데, app-content에서 app-header로 바로 줄 수는 없는걸까?
결론부터 말하면 줄 수 없다. 이다.
강의를 들으면서 나도 '직접 전달하면 편하지 않을까?' 라는 생각을 하였지만, 이런 규칙을 만듦으로써 데이터의 흐름을 추적할 수 있고, 코드의 유지보수가 쉬워지는 특징을 가질 수 있다.
