vue.js 기초- 인스타그램 만들어보기 06_EventBus(코딩애플 세미나 후기)

EventBus에 대해 알아보겠습니다.

 

EventBus는 컴포넌트간의 통신을 쉽게해준다고 합니다.

물론 child-parent 까지의 간단한 컴포넌트라면 사용안해도 props를 통해 통신을 할 수 있습니다.

하지만 복잡해진 트리 체계를 갖게된다면?

 

EventBus를 사용해서 처리하는 방식을 알아보겠습니다.

---

EventBus.js 파일을 생성해줍니다.

src/assets 하위에 생성

그리고 EventBus.js에 내용을 작성해 줍니다.

import Vue from 'vue';

export default new Vue()

 

이것으로 EventBus.js 내부 작성은 끝입니다. 

이것을 기존 프로젝트에서 import해서 사용하면됩니다.

 

예제를 하기위해서 기존 프로젝트에 parent-child 구조의 컴포넌트 하나를 추가하겠습니다.

아래 영역을 Component로 만들겠습니다.

 

Editor.vue 파일하나 생성하고 해당 내용을 넣어줍니다.

component 폴더 하위에 생성

아래 이미지를 참고해서 옮기도록 합니다.

그 후 App.vue에 가서 컴포넌트를 등록해줍니다.

 

컴포넌트 등록 순서는 이쯤되면 아시겠죠?

.vue 파일을 script영역에서 import 하고, 그 후에 component에 등록해줍니다.

마지막으로 <template>내부에 태그로 넣어주면 됩니다.

import

컴포넌트 등록

template에 태그 삽입

렌더링 화면 입니다.

화면은 나오는데, 지난번 완성했던대로 안나옵니다.

이미지가 안나오죠?

콘솔에 보거나 터미널창을 보면 에러가 막 뿜어져나오고 있습니다.

컴포넌트로 옮겼으니 data 관련해서도 수정을 해야하기때문입니다..ㅎ

 

App.vue

Editor.vue로 data를 이동시킵니다.

App.vue

title, autore, caption은 Editor.vue에서 입력받으니 Editor.vue로 옮겨줍니다.

Editor.vue

그 후 App.vue파일에서 Editor.vue에서 필요한 imgSrc를 props로 전달해줍니다.

imgSrc에 nesImgSrc를 prop로 전달한다.

보냈으면 받아서 사용해야하기 때문에

Editor.vue로 가서 props로 받아주고, 그 후 imgSrc를 img에 bind해줍니다.

props로 등록

v-bind를 통해 imgSrc를 src에 데이터 바인딩해준다.

 

이렇게 하면 이미지 선택 -> 렌더했던 순서까지 진행됩니다.

 

그 다음 filter 처리더 있었으니, 수정해주겠습니다.

filter 관련 작업은(반복문) Editor.vue 컴포넌트 안에서 하고 있어서 filters를 props로 전달해주면 됩니다.

 

App.vue

filters를 prop로 전달한다.

Editor.vue

props로 받아줍니다.

App.vue에서 전달한 prop 등록

 

filter 텍스트는 확인이되는데, 이미지가 안나옵니다.

필터 이미지가 안나옴

selectFilter, getFilter 이벤트 관련해서 에러가 나고 있습니다.

 

이제 EventBus를 사용해서 수정해보겠습니다.

Editor.vue파일에 EventBus를 import합니다.(사용하려는 곳에 다 등록되어있어야합니다.)

import

그 후 EventBus에 보내줄 함수를 생성합니다.

getFilter 함수는 App.vue에 있는데 이것을 App.vue에서 Editor.vue로 이동시킵니다.

App.vue

Editor.vue

그 후에 Editor.vue에서 EventBus를 통해 컴포넌트에서 선택한 필터를 App.vue에 전송해줄것입니다.

EventBus는 데이터 전송 시 아래와 같이 사용합니다.

EventBus.$emit('데이터를 전송하는 이름', 데이터); 

Editor.vue에서 EventBus사용하기

클릭으로 getFilter가 실행되면 일단 this.selectFilter에 className을 저장합니다.

 

이때 this.selectFilter에 data에 선언했다가 저장하는 이유는,, template 내부에서 사용하기 때문입니다.

EventBus 문법으로 select-filter라는 이름을 만들고 className을 담아 보냅니다.

그리고 App.vue에서 받아줍니다.

 

EventBus로 데이터를 보내면 어디서 받는지? 하는데, 일반적으로 버스 보내면 mounted()에서 작업한다고 합니다.

mounted()는 vue 라이프사이클 중에 하나입니다.

 

mounted는 가상 DOM 내용이 실제 DOM에 부착되고 난 이후에 실행되므로 methods, data등에 접근할 수 있어서 일반적으로 가장 많이 사용한다고 합니다.

 

이벤트를 받을 때에는 아래와 같이 합니다.

EventBus.$on('데이터를 전송하는 이름', (전송된 데이터) => { }); 

 

App.vue

EventBus.js를 import하고 문법에 맞게 작성하고 아까 담아보낸 select-filter를 사용해서 전송을 받습니다.

 

이제 렌더링된 것을 확인해보면 이미지가 잘 나옵니다.

그리고 필터 선택도 됩니다, 하지만 저장은 아직 안됩니다.

저장 버튼을 누르면 update이벤트 관련 에러가 납니다.

 

이것도 Editor.vue에서 정보를 EventBus를 통해 전송하여 App.vue에서 저장해주도록 수정하겠습니다.

 

App.vue

update함수를 Editor.vue로 옮깁니다.

App.vue

 

Editor.vue 데이터에 맞춰 수정해줍니다.

Edirtor.vue

EventBus로 업데이트할 데이터를 보낼 수 있도록 수정했습니다.

step, 그리고 data 배열에 update해야 하는 리스트를 삽입하는 작업은 App.vue에서 진행하겠습니다.

 

App.vue

데이터를 받는 것을 아까와 같이 mounted()에 추가해줍니다.

mounted에 추가

EventBus가 실행될 때 step 값을 수정해주고, data 배열에 새로운 리스트를 추가해줍니다.

저장을 누르면

정상작동하는 부분을 확인했습니다.

간단한 예시를 통해 EventBus에 대해 알아보았습니다.