부모 -> 자식 component 간 통신 방법 중 가장 엘레강스한 통신 방법이 무엇인지요?

뷰르주아
2019. 01. 07. 08:09

검색해보면 부모 자식 간 component 통신 방법이 무수히 많네요.

자식이 부모에게 이벤트를 던지는 방법은 굉장히 쉬운데,

부모가 자식에게 이벤트를 내려주는 방법은 다소 꼼수를 쓰는 방법들인 것 같습니다.

저는 개인적으로는 그냥 글로벌 이벤트 버스를 만들어서 아래처럼 활용하고 있습니다.

// app.js
Vue.prototype.$eventHub = new Vue();
// parent.js
methods: {
  changeName() {
    this.$eventHub.$emit('change-name', this.newName);
  }
}
// child.js
created() {
    this.$eventHub.$on('change-name', this.changeName);
},

그런데 글로벌 이벤트를 사용하면 모든 컴포넌트가 이벤트의 청취가 가능할 것이라서 그렇게 좋은 방법으로 생각이 되지 않는데, 다른 엘레강스한 통신 방법이 있을까요?

공유하고 돈벌기 ♥︎

총 1개의 답변이 있습니다.

다스 베이더 답변자 인증 뱃지
NS시스템 프론트엔드 개발자

안녕하세요 뷰르주아님!

지나가던 프론트엔드 개발자입니다. 같은 고민을 하는 분을 만나서 되게 반갑습니다.

말씀하신대로 Vue.js 에서 컴포넌트 간의 통신에 널리 쓰이는 방법은 크게 세 가지가 있습니다.

  1. props : 부모가 자식에게 데이터를 내려줌

  2. $emit : 자식이 부모에게 event 를 올림

  3. eventBus : 서로 다른 부모를 가진 컴포넌트간에 글로벌 통신

props-events저같은 경우는 부모가 자신의 자손에게 데이터를 내릴 때는 가급적이면 props 를 사용합니다.

문제는 서로 관계없는 컴포넌트간에 통신하려는 경우, 혹은 형제, 조상 - 자손 간의 통신이 필요한 경우입니다. 이런 관계에서 여러 컴포넌트를 거치는 불필요한 작업없이 이벤트를 전파하려면 말씀하신 대로 이벤트 버스를 이용하는 방법이 가장 널리 쓰입니다. 하지만 이벤트 버스의 경우 데이터 선언과 갱신 로직을 컴포넌트 마다 복붙해야하는 불편함이 있습니다. 어플리케이션 규모가 커지면 이벤트 버스보다는 Vuex 저장소를 사용하시기를 추천드립니다.

vuex 에 대해 간략하게 설명드리자면.. Flux 에서 영감을 받은 프로젝트라고 보시면 되고요.

  1. vuex 를 사용하시면 공통의 데이터는 중앙 저장소에서 관리되고,

  2. 컴포넌트는 저장소의 상태(데이터)를 받아와서 출력합니다.

  3. 어떤 컴포넌트에서 데이터가 변경되면 중앙 저장소에 변경사항을 커밋하고,

  4. 저장소의 상태가 변경되면 저장소를 바라보고 있던 모든 컴포넌트의 탬플릿이 갱신됩니다.

자세한 사항이 궁금하시다면 Vuex 한글 공식문서 를 참고하시기 바랍니다.

적다보니 장황해졌는데요. 도움이 되셨길 바랍니다. :)

감사합니다~

2019. 01. 07. 10:55
42