vue3 에서 아래와 같이 작업해도 emitter (객체를 확인하면 loadChartData) array 갯수가 늘어나는 이유는?

Vue 3에서 onUnmounted와 onMounted를 사용하여 이벤트 리스너를 등록하고 해제하는 코드를 작성하셨습니다. 그러나 이벤트 리스너가 올바르게 해제되지 않아서 loadChartData array의 갯수가 계속 늘어나고 있습니다. 이를 해결하기 위해 몇 가지 확인해야 할 사항이 있습니다.

1. 이벤트 핸들러가 동일한 함수인지 확인: 이벤트 리스너를 해제할 때, emitter.off에 전달하는 핸들러는 정확히 emitter.on에 전달한 핸들러와 동일해야 합니다. 현재 코드에서는 익명 함수로 이벤트 리스너를 등록하고 있어서, 정확히 동일한 핸들러를 해제하지 못합니다.
2. 핸들러를 변수에 저장: 이벤트 핸들러를 변수에 저장하여 등록하고 해제할 때 동일한 변수를 사용해야 합니다. 이렇게 하면 off를 호출할 때 동일한 핸들러를 참조할 수 있습니다.

다음은 수정된 예제입니다.

 

import { onMounted, onUnmounted } from 'vue';
import { emitter } from 'path/to/emitter'; // emitter를 가져오는 경로에 맞게 수정하세요

export default {
  setup() {
    const loadChartDatahandler = data => {
      // to do
    };

    // 핸들러를 변수에 저장
    const loadChartDataListener = data => {
      loadChartDatahandler(data);
    };

    onMounted(() => {
      emitter.on('loadChartData', loadChartDataListener);
    });

 

이렇게 하면 onMounted에서 등록한 이벤트 리스너와 onUnmounted에서 해제하는 이벤트 리스너가 동일한 핸들러를 참조하게 되어, 이벤트 리스너가 올바르게 해제됩니다. 이를 통해 loadChartData array의 갯수가 늘어나는 문제를 해결할 수 있습니다.