[콜럼Vue스] 이벤트 에미터(Event Emitter)

1. 이벤트 에미터(Event Emitter)란?

Vue에서 이벤트 에미터는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 사용하는 메커니즘임.

자식 컴포넌트가 특정 이벤트를 발생($emit)시키고, 부모 컴포넌트는 해당 이벤트를 수신(v-on 혹은 @)하여 처리하는 방식임.

이벤트 에미터는 주로 사용자 입력, 폼 제출, 상태 변경과 같은 이벤트를 부모 컴포넌트에 전달할 때 사용됨.

 

2. 기본적인 이벤트 에미터 사용 예제

// 부모 컴포넌트 (Parent.vue)
<template>
  <div>
    <ChildComponent @increment="handleIncrement" />
    <p>카운트: {{ count }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleIncrement(value) {
      this.count += value;
    },
  },
  components: { ChildComponent }
};
</script>

// 자식 컴포넌트 (ChildComponent.vue)
<template>
  <button @click="emitIncrement">증가</button>
</template>

<script>
export default {
  methods: {
    emitIncrement() {
      this.$emit('increment', 1); // 'increment' 이벤트 발생, 데이터 전달
    }
  }
};
</script>

설명:

• 자식 컴포넌트에서 $emit('increment', 1)으로 이벤트와 데이터를 부모로 전달.
• 부모 컴포넌트는 @increment로 이벤트를 수신하고 handleIncrement 메서드를 실행하여 count 값을 증가시킴.

3. 이벤트 에미터로 상태 전달하기

이벤트 에미터는 자식 컴포넌트가 상태 변경을 부모 컴포넌트에 알릴 때도 유용함. 특히, 폼 데이터나 사용자 상호작용을 부모에게 전달하는데 자주 사용됨.

// 부모 컴포넌트 (Parent.vue)
<template>
  <div>
    <FormComponent @submit="handleFormSubmit" />
    <p>제출된 데이터: {{ submittedData }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      submittedData: {},
    };
  },
  methods: {
    handleFormSubmit(data) {
      this.submittedData = data;
    }
  },
  components: { FormComponent }
};
</script>

// 자식 컴포넌트 (FormComponent.vue)
<template>
  <button @click="submitForm">폼 제출</button>
</template>

<script>
export default {
  methods: {
    submitForm() {
      const data = { name: '홍길동', age: 30 };
      this.$emit('submit', data); // 부모로 데이터 전달
    }
  }
};
</script>

4. 이벤트 에미터와 유효성 검증

Vue 3에서는 emits 옵션을 사용해 이벤트의 유효성 검증이 가능함. 이를 통해 올바르지 않은 이벤트 발생을 사전에 방지할 수 있음.

유효성 검증 예제:

export default {
  emits: {
    submit: (data) => {
      return data && data.name && data.age > 0; // 데이터 검증
    }
  },
  methods: {
    submitForm() {
      const data = { name: '홍길동', age: 30 };
      this.$emit('submit', data);
    }
  }
};

설명:

• emits 옵션을 통해 이벤트와 데이터의 유효성을 검증.
• 유효성 검증을 통과하지 못하면 이벤트가 발생하지 않음.

5. 이벤트 에미터와 부모-자식 간 소통의 장점

1. 단방향 데이터 흐름 유지: Vue의 데이터 흐름은 부모 → 자식으로 단방향임. 하지만 이벤트 에미터를 통해 자식이 부모에게 데이터를 전달할 수 있음.
2. 컴포넌트 간의 느슨한 결합: 이벤트를 통해 컴포넌트 간에 직접적인 의존성을 줄이고 유지보수를 용이하게 함.
3. 명확한 이벤트 처리: 부모 컴포넌트에서 명시적으로 이벤트를 수신하고 처리함으로써 코드의 가독성을 높임.