[vue3] emitter.on 이벤트 사용시 emitter 갯수가 증가하는 이유

원본 코드

const loadChartDatahandler = data=>{
   // to do
};
onUnmounted(()=>{
   emitter.off('loadChartData', loadChartDatahandler) 
}):
onMounted(()=>{
   emitter.on('loadChartData', data=>{
               loadChartDatahandler(data);
   })
});

 

Vue 3에서 이벤트 리스너를 등록하고 해제하는 과정에서 loadChartData 배열의 길이가 계속 늘어난다면, 이는 이벤트 리스너가 제대로 제거되지 않았기 때문일 가능성이 큽니다. 이 문제를 해결하려면 이벤트 리스너를 등록할 때 사용하는 함수 참조를 일관되게 유지해야 합니다.

문제는 onMounted에서 새로운 익명 함수를 사용하여 이벤트 리스너를 등록하고, onUnmounted에서는 다른 함수 참조를 사용하여 이벤트 리스너를 해제하려고 하기 때문에 발생합니다. 이벤트 리스너를 등록하고 해제할 때 동일한 함수 참조를 사용해야 합니다.

다음은 이 문제를 해결하기 위한 수정된 코드입니다:

수정된 코드

import { onMounted, onUnmounted } from 'vue';

const loadChartDatahandler = data => {
  // to do
};

// 이벤트 리스너 참조를 저장할 변수를 정의
let loadChartDataListener;

onMounted(() => {
  // 이벤트 리스너에 동일한 함수 참조를 할당
  loadChartDataListener = data => {
    loadChartDatahandler(data);
  };
  
  // 이벤트 리스너를 등록
  emitter.on('loadChartData', loadChartDataListener);
});

onUnmounted(() => {
  // 이벤트 리스너를 해제
  emitter.off('loadChartData', loadChartDataListener);
});

설명:

1. loadChartDatahandler:
   • 데이터를 처리하는 핸들러 함수입니다.
2. loadChartDataListener 변수:
   • 이벤트 리스너의 참조를 저장합니다. 이는 onMounted와 onUnmounted에서 동일한 함수 참조를 사용하기 위해 필요합니다.
3. onMounted:
   • 컴포넌트가 마운트될 때 호출됩니다.
   • loadChartDataListener에 이벤트 리스너를 할당하고, emitter.on을 사용하여 이벤트 리스너를 등록합니다.
4. onUnmounted:
   • 컴포넌트가 언마운트될 때 호출됩니다.
   • emitter.off를 사용하여 이벤트 리스너를 해제합니다.

이 수정된 코드는 이벤트 리스너를 등록하고 해제할 때 동일한 함수 참조를 사용하므로, 이벤트 리스너가 제대로 제거되고 loadChartData 배열의 길이가 늘어나는 문제를 해결할 수 있습니다.