컴포넌트 통신 방법 (Props와 이벤트)

 컴포넌트는 독립적으로 작동하면서도 다른 컴포넌트와 데이터를 주고받을 수 있어야 합니다. Vue에서는 Props와 이벤트를 사용하여 컴포넌트 간의 효과적인 통신을 구현할 수 있습니다.

1. Props를 사용한 데이터 전달

Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하기 위해 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 props 옵션을 정의하고, 자식 컴포넌트에서는 전달받은 데이터를 사용할 수 있습니다.

// 부모 컴포넌트
new Vue({
  data() {
    return {
      message: '안녕하세요!'
    };
  }
});

// 자식 컴포넌트
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

자식 컴포넌트의 props에 전달받을 데이터의 이름을 선언하고, 해당 값을 템플릿에서 사용할 수 있습니다.

<div id="app">
  <child-component v-bind:message="message"></child-component>
</div>

부모 컴포넌트에서 v-bind를 사용하여 자식 컴포넌트의 props에 데이터를 전달합니다.

2. 이벤트를 사용한 부모-자식 컴포넌트 간의 통신

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 이벤트를 사용할 수 있습니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트는 이벤트 리스너를 통해 데이터를 처리할 수 있습니다.

// 자식 컴포넌트
Vue.component('child-component', {
  template: '<button v-on:click="sendMessage">메시지 전송</button>',
  methods: {
    sendMessage() {
      this.$emit('message-sent', '안녕하세요!');
    }
  }
});

// 부모 컴포넌트
new Vue({
  methods: {
    handleMessage(message) {
      alert('받은 메시지: ' + message);
    }
  }
});

자식 컴포넌트에서 $emit 메서드를 사용하여 이벤트를 발생시키고, 부모 컴포넌트에서는 이벤트 리스너를 정의하여 데이터를 처리합니다.

<div id="app">
  <child-component v-on:message-sent="handleMessage"></child-component>
</div>

부모 컴포넌트에서 v-on 디렉티브를 사용하여 자식 컴포넌트에서 발생한 이벤트를 감지하고, 지정한 메서드를 실행합니다.

Props와 이벤트를 통해 부모-자식 컴포넌트 간의 데이터 전달과 통신을 구현할 수 있습니다. 이를 활용하여 컴포넌트 간의 유연하고 효과적인 상호작용을 구현할 수 있습니다. 위의 내용을 참고하여 실습을 진행해보세요.