[vue.js] 컴포넌트와 이벤트, 프롭스

컴포넌트는 화면의 영역을 구분해서 개발할 수 있는 뷰의 기능이다.

컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.

 

출처 : 장기효님 inflearn 강좌

위의 그림과 같이, 화면단에서 표현되는 부분들을 컴포넌트 단위로 분리하면 하나 하나에 로직을 넣어 유지보수도 쉽고 코드 관리도 더 쉽게 할 수 있다.

 

컴포넌트 생성 코드 형식 

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

컴포넌트 생성 후 표시하는 방법 

Vue.component('app-header', {
	template: '<h1>Header Component</h1>
});

컴포넌트를 통해 app-header를 선언하게 되면, html 코드에 해당 컴포넌트의 이름을 태그 형식으로 쓸 수 있다.

<div id="app">
	<app-header></app-header>
</div>

app-header 컴포넌트의 템플릿에 <h1>Header Component</h1>를 사용하기로 했기 때문에 전체적인 코드는 아래와 같아진다.

<div id="app">
	<h1>Header Component</h1>
</div>

 

컴포넌트를 등록하는 두 가지 방법

방금 위에서 사용한 방법은 전역 컴포넌트를 등록하는 방법이고, 지역 컴포넌트로 등록하는 방법은 아래와 같다.

var appHeader = {
	template: '<h1>Header Component</h1>'
}

new Vue({
	components: {
    	'app-header': appHeader
    }
});

 

컴포넌트의 통신 방식

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. 따라서 컴포넌트간의 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따라야 한다.

출처 : 장기효님 inflearn 강좌

상위 컴포넌트에서 하위 컴포넌트로는 props라는 이름으로 데이터를 내려주고,

하위 컴포넌트에서는 상위 컴포넌트로 이벤트를 올려준다.

 

처음에는 이해가 잘 되지 않았지만, 한 번 이해하게 되면 컴포넌트 간 데이터 전송을 조금 더 쉽게 이해할 수 있다.

 

 

프롭스(props)

프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법. 프롭스는 상위에서 하위로 데이터를 내려보내는 속성이라고 기억하면 좋다.

 

props 속성 코드 형식

//하위 컴포넌트 코드
var childComponent = {
	props: ['프롭스 속성 명']
}

<!-- 상위 컴포넌트 탬플릿 -->
<div id="app">
	<child-component v-bind:프롭스 속성 명="상위 컴포넌트의 data 속성(넘겨줄 데이터 이름)"</child-component>
</div>

 

props 속성 코드 예시

//하위 컴포넌트 : childComponent
var childComponent = {
	props: ['propsdata'], //혹은 자신이 짓고 싶은 이름도 상관 없다.
    template: '<p> {{ propsdata }} </p>' //위에 props에서 받은 데이터 이름과 동일해야한다.
}

//예를 들어 아래와 같이도 사용 가능
var childComponent = {
	props: ['givenMessage'],
    template: '<p> {{ givenMessage }} </p>'
}



//상위 컴포넌트: root 컴포넌트
new Vue({
	el: '#app',
    components: {
    	'child-component': childComponent
    },
    data: {
    	message: 'hello vue.js'
    }
});

<div id="app">
	<child-component v-bind:propsdata="message"></child-component>
    <!-- 위 코드의 뜻은 상위 컴포넌트에 선언된 데이터 message를 propsdata로 넘겨준다는 의미-->
</div>

<!-- 만약 내가 아까 바꾼 givenMessage를 사용한다고 하면 -->
<div id="app">
	<child-component v-bind:givenMessage="message"></child-component>
    <!-- 위 처럼 하위 컴포넌트에 선언된 props 이름을 사용하면 된다. -->
</div>

 

이벤트(Event)

이벤트는 하위 컴포넌트에서 상위 컴포넌트로 통신하기 위해 사용하는 방식이다.

이벤트 발생 코드는 아래와 같이 선언한다.

//하위 컴포넌트 내용
this.$emit('이벤트 명');

$emit은 이벤트 생성하는 코드라고 생각하면 편하다.

<!-- 상위 컴포넌트 탬플릿 -->
<div id="app">
	<child-component v-on:이벤트 명="상위컴포넌트의 실행할 메서드 명 또는 연산"></child-component>
</div>

해당 코드를 사용한 예시는 아래와 같다.

 

//하위 컴포넌트 : childComponent
var childComponent = {
	methods: {
    	sendEvent: function() {
        	this.$emit('update');
        }
    }
}

//상위 컴포넌트 : root 컴포넌트
new Vue({
	el: '#app',
    components: {
    	'child-component': childComponent
    },
    methods: {
    	showAlert: function() {
        	alert('event received');
        }
    }
});

<div id="app">
	<child-component v-on:update="showAlert"></child-component>
    <!-- 하위에서 선언된 update라는 이벤트가 실행되고 나면 상위 컴포넌트의 showAlert 메소드를
    실행한다는 코드 -->
</div>

위와 같은 예시로 들자면, 하위 컴포넌트에서 클릭이나 기타 다른 방법으로 sendEvent가 작동하게 되면, 'update'라는 이름으로 $emit을 통해 상위 컴포넌트로 이벤트가 전달되며, 그걸 주시하고 있던 템플릿에서는 update라는 이벤트를 받으면 상위 컴포넌트의 showAlert 메소드를 실행한다는 의미가 된다. 위와 같은 방법으로 하위에서 상위로, 상위에서 하위로 데이터를 옮겨줄 수 있다.