뷰 컴포넌트 통신

• 뷰는 컴포넌트로 화면을 구성하고 있기 때문에 같은 웹 페이지라도 데이터를 공유할 수 없다.
• 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문이다.
• 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.
• 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다.

상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법

• 지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 하위 컴포넌트가 되고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다.
• 인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트가 되고, 새로 등록된 컴포넌트는 하위 컴포넌트가 된다.
• 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 컴포넌트(Root Component)라고도 부른다.

상위 → 하위 컴포넌트로 데이터 전달 (props 속성)

• props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다.
• 아래와 같이 props 속성을 하위 컴포넌트의 속성에 정의한다.

Vue.component('child-component', {
    props: ['props 속성 이름'],
});

• 그런 다음 상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind 속성을 추가한다.
• v-bind 속성의 왼쪽 값은 하위 컴포넌트에서 정의한 props 속성이고, 오른쪽 값은 하위 컴포넌트로 전달할 상위 컴포넌트의 data 속성을 지정한다.

<div id="app">
    <child-component v-bind:props속성="상위 컴포넌트의 data 속성"></child-component>
</div>

• 상위 컴포넌트의 data 속성 값이 변경되면 그대로 하위 컴포넌트의 props 속성에 반영된다. (뷰의 반응성)

하위 → 상위 컴포넌트로 이벤트 전달

• 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 해당 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출한다.
• 하위 컴포넌트에서 발생시킨 이벤트를 상위 컴포넌트에서 받아 상위 컴포넌트의 메서드를 동작시키는 것
• 이벤트 발생은 $emit()을 이용하고 이벤트 수신은 v-on 속성을 이용한다.

//해당 이벤트 발생
this.$emit('이벤트명');

//이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

• 일반적으로 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부이다. 따라서 $emit()을 호출할 때 사용하는 this는 하위 컴포넌트를 가리킨다.
• 호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on:으로 받는다.
• 하위 컴포넌트에서 발생한 이벤트명을 v-on: 속성에 지정하고, 속성의 값에 이벤트가 발생했을 때 호출될 상위 컴포넌트의 메서드를 지정한다.
• 이 방식으로 하위 컴포넌트에서 상위 컴포넌트로 신호를 올려보내면 상위 컴포넌트의 메서드를 실행할 수도 있고, 하위 컴포넌트로 내려보내는 props의 값을 조정할 수도 있다.

같은 레벨의 컴포넌트 간 통신

• 뷰는 상위에서 하위로만 데이터를 전달해야 하는 기본적인 통신 규칙을 따르기 때문에 바로 옆 컴포넌트에 값을 전달하려면 하위에서 공통 상위 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props를 내려 보내야 한다.
• 하지만 이런 통신 구조를 유지하게 되면 같은 레벨 간에 통신하기 위해 강제로 상위 컴포넌트를 두어야 한다.
• 이를 해결하기 위한 방법이 이벤트 버스이다.

이벤트 버스 (Event Bus)

• 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법
• 상위 - 하위 관계를 유지하지 않아도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.
• 로직을 담는 인스턴스와를 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 주고 받는다.
• 보내는 컴포넌트에서는 .$emit()을, 받는 컴포넌트에서는 .$on()을 구현한다.

//이벤트 버스를 위한 추가 인스턴스
var eventBud = new Vue();
 
//이벤트를 보내는 컴포넌트
methods: {
    메서드명: function() {
        eventBus.$emit('이벤트명', 데이터);
    }
}
 
//이벤트를 받는 컴포넌트
methods: {
    created: function() {
        eventBus.$on('이벤트명', function(데이터) {
 
        });
    }
}

• 이벤트 버스를 활용하면 props 속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생한다.
• 이 문제를 해결하려면 뷰엑스(Vuex)라는 상태 관리 도구가 필요하다.
  • 뷰엑스는 중, 대형 애플리케이션에서 컴포넌트 간의 데이터 관리를 효율적으로 하는 라이브러리이다.
  • 뷰엑스(Vuex) 포스트