Vue.js - 컴포넌트 통신

 

 

 

Vue.js는 컴포넌트 끼리의 데이터 통신이 가능하다. 보통은 Vuex를 써서 좀 더 효율적으로 상태 관리를 하거나 데이터를 담아 구조적으로 통신을 하나 순수 Vue에서의 Method를 통해 데이터 통신을 할 수 있다.

 

 

부모 컴포넌트에서 자식 컴포넌트로 통신

 

가장 기본적인 단방향 통신 방법으로 'props'와 '사용자 정의 이벤트'를 사용해서 통신을 한다.

 

부모 컴포넌트는 사용자 지정한 속성으로 값을 보내고 자식 컴포넌트는 부모에서 지정한 속성을 'props'로 받아온다.

 

간단한 Props를 넘겨주는 예제로 알아본다.

 

(부모 컴포넌트)

 

 

 

먼저 부모 컴포넌트에서 생성한 HelloWorld 컴포넌트에 msg 라는 사용자 정의 속성을 넣고 메세지를 넣는다.

 

(자식 컴포넌트)

 

 

 

자식 컴포넌트에서 props 속성으로 부모에서 전달 받은 msg 속성을 받아온다. 이때 타입을 설정해 주면 지정한 자료형 이외의 값이 들어 올 수 없기 때문에 경고가 출력되므로 협업을 할 때도 좋다.

 

 

자식 컴포넌트에서 부모 컴포넌트로 통신

 

자식 컴포넌트의 상태에 따라서 부모 컴포넌트에서 어떤 액션을 실시하도록 처리하거나, 자식 컴포넌트가 가진 데이터를 부모 컴포넌트에 전달하고 싶을 때는 '사용자 정의 이벤트'와 '$emit'이라는 인스턴스 메서드를 사용한다.

 

대부분의 프론트엔드 프레임워크에서는 부모 컴포넌트 -> 자식 컴포넌트로 Props을 넘겨주는 단방향 통신 방식을 지향하지만 Vue.js에서는 자식 컴포넌트 -> 부모 컴포넌트로 통신이 가능하다.

 

(정확한 의도는 모르겠지만 추측컨데 사용자의 편의성이라든지 Vue Framework에 다른 프론트엔드 기술과는 차별화를 두지 않았을까...? 라는 생각을 갖게 된다.)

 

간단한 메세지 변경을 하는 예제로 알아보자.

 

(자식 컴포넌트)

 

먼저 자식 컴포넌트에서 버튼을 하나 만들고 click 이벤트에 함수를 하나 넣어준다.

그 후 생성된 메소드 안에 this.$emit('부모로 전달할 이벤트')를 넣어주면 된다.

 

(부모 컴포넌트)

 

메세지를 출력하기 위해 'msg'라는 기본 데이터를 하나 생성하고 div안에 넣는다.

 

자식 컴포넌트가 되는 HelloWorld 메소드에 v-on:'자식에서 emit으로 설정된 이름'을 넣어주고 부모에서 실행 할 함수명을 넣어준다.

 

예제를 통한 버튼을 눌러보면 아래와 같은 결과가 나온다.

 

(누르기 전 초기)

(누른 후 변경된 메세지 확인)

 

간단하게 정리를 해보면 '자식 컴포넌트에서는 $emit()', '부모 컴포넌트에서는 v-on로 Emit 속성'을 받아온다고 생각하면 된다.

 

말 그대로 자식 컴포넌트에서 실행 시킨 메소드를 부모 컴포넌트로 전달하여 이벤트를 발생시킨다.

 

부모 컴포넌트도 자식 컴포넌트도 아닐 경우

부모 자식 컴포넌트가 아닌 컴포넌트들끼리 데이터를 전달 할 경우가 있다. 이때는 '$emit'도 '사용자 정의 이벤트'로도 전달 할 수가 없다.

(사실 이때부터 Vue.js가 너무 방향도 없이 산으로 가는게 아닌건가... 라는 생각이 들었다.)

 

이때는 Vue 인스턴스의 이벤트 버스(Event Bus)라는 기능을 사용한다.

 

Event Bus에 대해서는 설명은 쓰지 않으려고 한다. 이쯤 오면 차라리 Vuex를 사용하는 것이 옳다고 생각한다.

 

이곳저곳에 Event Bus를 사용한다면 프로젝트가 커지면 커질수록 관리를 하기 너무 힘들고 복잡한 구조를 갖게 되어 향후 유지보수에서도 꽤 어려움을 겪게 된다.

 

이때는 주저말고 Vuex를 사용하는 쪽으로 고민해보자...