웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 컴포넌트 상호간 데이터를 주고 받을 수 있는 이벤트버스(EventBus)를 알아봅니다. 이벤트버스는 무엇이고 언제 왜 사용할까요?
# VueJS의 EventBus란
VueJS의 eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있는 방법 중 하나인데요 매우 많이 사용됩니다. 그 이유는 기본적으로 props를 사용하여 부모와 자식 사이의 데이터를 전달하기 때문에 해당 컴포넌트의 스코프에 제한되죠. 하지만 이 방법은 부모와 자식 컴포넌트는 물론 최상위 루트 컴포넌트나 다른 컴포넌트와의 데이터도 주고 받을 필요가 있습니다. 이럴때 유용하게 사용할 수 합니다.
(데이터를 주고 받는 방법으로 props 속성이 가장 많이 사용됩니다. 하지만 부모에서 자식 사이라는 범위 때문에 아주 먼 컴포넌트 사이는 EventBus 또는 Vuex를 사용할 수 있습니다.)
요약하면 VueJS EventBus를 사용하면 아래와 같은 장점이 있습니다.
딱히 단점은 없지만 전역 범위로 사용 가능하므로 데이터의 충돌 등의 이슈에 주의해서 사용해야합니다. 즉 너무 남발하여 사용하기 보다는 제한적인 사용이 필요하죠.
! EventBus 사용하는 방법
이벤트 버스는 Vue 인스턴스에 프로토타입으로 추가하거나 아니면 모듈로 만들어 놓고 import 하는 방식으로 사용합니다. 이때 EventBus 객체는 따로 내장객체를 사용하는 것이 아닌 비어있는 Vue 인스턴스를 만들면 사용하면 됩니다. 둘 다 사용 가능한 방법입니다. 각각 알아보면...
1. Vue 인스턴스에 prototype으로 추가하는 방법
불러올 때는 this를 사용하여 this.EventBus로 사용이 가능합니다.
2. 모듈로 저장하고 필요한 곳에서 불러와 사용하는 방법
다음은 모듈로 저장하는 방법으로 eventBus를 외부 모듈로 등록 후 필요한 컴포넌트, 위치에서 import하여 사용합니다.
@ eventBus.vue
이제 필요한 컴포넌트나 파일에서 import 후 아래처럼 사용하게 됩니다.
그럼 아래에서는 실제로 어떻게 앱에서 사용되는지 간단한 예제를 알아보도록 하겠습니다.
실제로 어떻게 EventBus를 사용하여 이벤트를 전달하는지 예제를 만들어 알아보겠습니다.아 래는 다른 컴포넌트에서 이벤트버스를 호출하여 메시지를 출력하는 예제입니다. 그럼 아래 예제 코드를 먼저 봐주세요.
@ componentA.vue
위의 componentA는 버튼을 가지고 있고 이 버튼을 클릭하면 showMsg()를 호출합니다.
클릭하면 EventBus의 $emit을 통해 alertMessage라는 이벤트를 호출합니다. componentB를 만들어 이 이벤트를 수신 후 메시지를 출력하면 되겠죠.
@ componentB.vue
이제 버튼을 클릭하면 변수 payload에 'Hello'가 전달되어 console창에 'Hello'가 출력되는 것을 볼 수 있습니다.
참고로 $on을 사용하기 위해서 mounted(옵션 객체 프로퍼티)에 추가하였습니다. created 등 다른 방법을 사용할 수도 있지만 mounted를 사용하였습니다.
# VueJS의 EventBus란
VueJS의 eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있는 방법 중 하나인데요 매우 많이 사용됩니다. 그 이유는 기본적으로 props를 사용하여 부모와 자식 사이의 데이터를 전달하기 때문에 해당 컴포넌트의 스코프에 제한되죠. 하지만 이 방법은 부모와 자식 컴포넌트는 물론 최상위 루트 컴포넌트나 다른 컴포넌트와의 데이터도 주고 받을 필요가 있습니다. 이럴때 유용하게 사용할 수 합니다.(데이터를 주고 받는 방법으로 props 속성이 가장 많이 사용됩니다. 하지만 부모에서 자식 사이라는 범위 때문에 아주 먼 컴포넌트 사이는 EventBus 또는 Vuex를 사용할 수 있습니다.)
요약하면 VueJS EventBus를 사용하면 아래와 같은 장점이 있습니다.
- 전역으로 데이터 전달이 가능
- 데이터 전달하거나 수신 방법이 간단함
딱히 단점은 없지만 전역 범위로 사용 가능하므로 데이터의 충돌 등의 이슈에 주의해서 사용해야합니다. 즉 너무 남발하여 사용하기 보다는 제한적인 사용이 필요하죠.
! EventBus 사용하는 방법
이벤트 버스는 Vue 인스턴스에 프로토타입으로 추가하거나 아니면 모듈로 만들어 놓고 import 하는 방식으로 사용합니다. 이때 EventBus 객체는 따로 내장객체를 사용하는 것이 아닌 비어있는 Vue 인스턴스를 만들면 사용하면 됩니다. 둘 다 사용 가능한 방법입니다. 각각 알아보면...1. Vue 인스턴스에 prototype으로 추가하는 방법
불러올 때는 this를 사용하여 this.EventBus로 사용이 가능합니다.
Vue.prototype.EventBus = new Vue(); // Vue에 등록
this.EventBus.$emit(); // this를 사용하는 방법
this.EventBus.$emit(); // this를 사용하는 방법
2. 모듈로 저장하고 필요한 곳에서 불러와 사용하는 방법
다음은 모듈로 저장하는 방법으로 eventBus를 외부 모듈로 등록 후 필요한 컴포넌트, 위치에서 import하여 사용합니다.
@ eventBus.vue
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
const EventBus = new Vue();
export default EventBus;
이제 필요한 컴포넌트나 파일에서 import 후 아래처럼 사용하게 됩니다.
import EventBus from './event-bus';
Vue.component('myComponent', {
...
methods: {
emitMethod () {
EventBus.$emit('EVENT_NAME', payLoad);
}
}
});
Vue.component('myComponent', {
...
methods: {
emitMethod () {
EventBus.$emit('EVENT_NAME', payLoad);
}
}
});
그럼 아래에서는 실제로 어떻게 앱에서 사용되는지 간단한 예제를 알아보도록 하겠습니다.
# VueJS EventBus 예제보기
실제로 어떻게 EventBus를 사용하여 이벤트를 전달하는지 예제를 만들어 알아보겠습니다.아 래는 다른 컴포넌트에서 이벤트버스를 호출하여 메시지를 출력하는 예제입니다. 그럼 아래 예제 코드를 먼저 봐주세요.
@ componentA.vue
Vue.prototype.EventBus = new Vue();
export default {
name: 'componentA',
methods: {
showMsg: function() {
this.EventBus.$emit('alertMessage', 'Hello');
});
}
}
export default {
name: 'componentA',
methods: {
showMsg: function() {
this.EventBus.$emit('alertMessage', 'Hello');
});
}
}
위의 componentA는 버튼을 가지고 있고 이 버튼을 클릭하면 showMsg()를 호출합니다.
<button @click="showMsg">Click</button>
클릭하면 EventBus의 $emit을 통해 alertMessage라는 이벤트를 호출합니다. componentB를 만들어 이 이벤트를 수신 후 메시지를 출력하면 되겠죠.
@ componentB.vue
Vue.prototype.EventBus = new Vue();
export default {
name: 'componentB',
mounted: function() {
this.EventBus.$on('alertMessage', function(payload) {
console.log(payload)
});
}
}
export default {
name: 'componentB',
mounted: function() {
this.EventBus.$on('alertMessage', function(payload) {
console.log(payload)
});
}
}
이제 버튼을 클릭하면 변수 payload에 'Hello'가 전달되어 console창에 'Hello'가 출력되는 것을 볼 수 있습니다.
참고로 $on을 사용하기 위해서 mounted(옵션 객체 프로퍼티)에 추가하였습니다. created 등 다른 방법을 사용할 수도 있지만 mounted를 사용하였습니다.
아래의 글도 찾고 계시지 않나요?