[Vue.js] props로 받은 데이터를 자식 컴포넌트에서 값을 바꿀때 사용하는 커스텀 이벤트 문법 (emit)

 

커스텀 이벤트?

지난 포스트에서 부모 컴포넌트가 가진 자식 컴포넌트에게 전달하고 받아올때 props를 사용했었다.

[Vue.js] 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송하는 문법 props

 

여기서 props는 'read-only'와 같은 개념이기 때문에 부모 컴포넌트에서 전송받은 데이터를 자식 컴포넌트에서 데이터값을 함부로 변경해서는 안된다.

 

자식 컴포넌트에서 데이터 값을 변경했을때는 웹 애플리케이션의 규모가 커졌을때 많은 부작용이 생겨 수정이 불가능에 가까울 지경에 이르게 되기 때문이다.

 

이때, 자식 컴포넌트에서 부모에게 전달받은 데이터를 변경하고 싶을때 사용하는 문법이 커스텀 이벤트 문법이다.

 

 

커스텀 이벤트 사용법

1. 자식 컴포넌트에서 커스텀 이벤트 생성

 

- 'emitCustomEvent' 함수에서 $emit 메서드를 사용하여 커스텀 이벤트를 생성한다.

- $emit 메서드에서 첫번째 인자로는 커스텀 이벤트 명을 작명하고, 두번째 인자로는 전달 할 이벤트 데이터를 기입한다.

// 자식 컴포넌트
<template>
  <button @click="emitCustomEvent">모달창이 오픈되는 커스텀 이벤트 발생 버튼</button>
</template>

<script>
export default {
  methods: { 
    emitCustomEvent() {
      // $emit메서드를 사용하여 커스텀 이벤트 작명 및 전달할 데이터자료 기입
      this.$emit('openModal', true);
    }
  }
}
</script>

 

 

 

2. 부모 컴포넌트에서 커스텀 이벤트 수신

- 부모 컴포넌트에서 커스텀 이벤트를 수신하려면 자식 컴포넌트에서 $emit 메서드의 첫번째 인자로 기입한 커스텀 이벤트 명을 사용하여 이벤트 리스너를 등록해야한다. 

- 자식 컴포넌트에서 $emit 메서드의 두번째 인자로 기입한 전달한 변경된 데이터 값은 부모컴포넌트에서 '$event' 로 받아 올 수 있다.

//부모 컴포넌트
<template>
  <div>
    <ChildComponent @openModal="handleCustomEvent($event)" />
    
    <div class="modal" v-if="ModalStatus">
    	<h2>모달</h2>
    </div>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  data() {
    return {
      ModalStatus: false
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(data) {
      this.ModalStatus = data;
    }
  }
}
</script>

 

 

위의 예제에서는 'ChildComponent' 라는 자식 컴포넌트에서 'openModal' 이라는 커스텀 이벤트를 생성했으며, 부모 컴포넌트에서 해당 이벤트를 'handleCustomEvent' 메서드를 사용하여 커스텀 이벤트와 자식이 보내준 변경된 데이터 값을 수신하고, 업데이트하여 모달 창이 오픈 될 수 있도록 동작한다.

 

위의 예제를 기반으로 커스텀 이벤트를 생성하면 쉽게 사용이 가능하지만 부모 > 자식 > 자식 > 자식 처럼 컴포넌트가 여러개로 분산되는 규모가 매우 큰 프로젝트일 경우 Vue.js에서 제공되는상태 중앙 집중 저장관리소 Vuex를 사용하거나, 멀리있는 컴포넌트간 데이터를 전송하고 싶을때 사용하는 mitt 같은 라이브러리를 사용하는게 좋다.