[typescript] Vue.js 컴포넌트 통신

26 Dec 2023

typescript

Vue.js는 강력한 프론트엔드 프레임워크로서 컴포넌트 간의 효과적인 통신이 중요합니다. 이번 글에서는 Vue.js에서 부모-자식 컴포넌트 간의 통신과 비부모-자식 컴포넌트 간의 통신에 대해 알아보겠습니다.

부모-자식 컴포넌트 간의 통신

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해서는 props를 사용합니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하거나 이벤트를 발생시킬 수 있습니다.

<template>
  <div>
    <child-component :message="parentData" @update="handleUpdate"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'This is data from parent',
    };
  },
  methods: {
    handleUpdate(newData) {
      this.parentData = newData;
    },
  },
};
</script>

위의 코드에서 parentData는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, update 이벤트를 통해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달합니다.

비부모-자식 컴포넌트 간의 통신

부모-자식 관계가 아닌 경우, 이벤트 버스(Event Bus)나 Vuex 상태 관리 패턴을 사용하여 컴포넌트 간의 통신을 할 수 있습니다. 이벤트 버스는 중앙 이벤트 핸들러로 작동하며, 컴포넌트들 간의 통신을 용이하게 합니다.

// 이벤트 버스 예시 (main.js)

import Vue from 'vue';
export const eventBus = new Vue();

new Vue({
  // ...
});

// 이벤트 버스를 통한 통신 (SenderComponent)

<script>
import { eventBus } from './main.js';

export default {
  methods: {
    sendData() {
      eventBus.$emit('send-data', data);
    },
  },
};
</script>

// 이벤트 버스를 통한 통신 (ReceiverComponent)

<script>
import { eventBus } from './main.js';

export default {
  created() {
    eventBus.$on('send-data', (data) => {
      // 데이터 처리 로직
    });
  },
};
</script>

이벤트 버스를 사용하는 방법 외에도, Vuex를 사용하여 어플리케이션의 상태를 중앙에서 관리하고 모든 컴포넌트가 상태를 공유하는 방법도 있습니다.

Vue.js에서 컴포넌트 간의 효과적인 통신은 애플리케이션 개발 시 중요한 부분이며, 위에서 언급한 방법들을 활용하여 상황에 맞게 적절히 활용할 수 있습니다.