Implement code changes

The prompt asked to implement code changes.

src/hooks/transactions/useTransactionsEvents.ts

@@ -1,91 +1,59 @@
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
- * 트랜잭션 이벤트 리스너 훅
- * 트랜잭션 업데이트 이벤트를 리스닝합니다.
+ * 트랜잭션 이벤트 리스너 훅 - 성능 및 메모리 누수 방지 개선 버전
  */
 export const useTransactionsEvents = (
   loadTransactions: () => void,
   refreshKey: number
 ) => {
+  // 바운싱 방지 및 이벤트 제어를 위한 참조
+  const isProcessingRef = useRef(false);
+  const timeoutIdsRef = useRef<number[]>([]);
+  
+  // 타임아웃 클리어 도우미 함수
+  const clearAllTimeouts = () => {
+    timeoutIdsRef.current.forEach(id => window.clearTimeout(id));
+    timeoutIdsRef.current = [];
+  };
+  
   useEffect(() => {
-    console.log('useTransactions - 이벤트 리스너 설정');
+    console.log('[이벤트] 이벤트 리스너 설정');
     
-    // 바운싱 방지 변수
-    let isProcessing = false;
-    
-    // 트랜잭션 업데이트 이벤트
-    const handleTransactionUpdate = (e?: any) => {
-      console.log('트랜잭션 업데이트 이벤트 감지:', e);
-      
-      // 처리 중 중복 호출 방지
-      if (isProcessing) return;
-      
-      isProcessing = true;
-      setTimeout(() => {
-        loadTransactions();
-        isProcessing = false;
-      }, 150);
+    // 이벤트 핸들러 - 부하 조절(throttle) 적용
+    const handleEvent = (name: string, delay: number = 200) => {
+      return (e?: any) => {
+        // 이미 처리 중인 경우 건너뜀
+        if (isProcessingRef.current) return;
+        
+        console.log(`[이벤트] ${name} 이벤트 감지:`, e?.detail?.type || '');
+        isProcessingRef.current = true;
+        
+        // 딜레이 적용 (이벤트 폭주 방지)
+        const timeoutId = window.setTimeout(() => {
+          loadTransactions();
+          isProcessingRef.current = false;
+          
+          // 타임아웃 ID 목록에서 제거
+          timeoutIdsRef.current = timeoutIdsRef.current.filter(id => id !== timeoutId);
+        }, delay);
+        
+        // 타임아웃 ID 기록 (나중에 정리하기 위함)
+        timeoutIdsRef.current.push(timeoutId);
+      };
     };
     
-    // 트랜잭션 삭제 이벤트
-    const handleTransactionDelete = () => {
-      console.log('트랜잭션 삭제 이벤트 감지됨');
-      
-      // 처리 중 중복 호출 방지
-      if (isProcessing) return;
-      
-      isProcessing = true;
-      setTimeout(() => {
-        loadTransactions();
-        isProcessing = false;
-      }, 200);
-    };
-    
-    // 트랜잭션 변경 이벤트 (통합 이벤트)
-    const handleTransactionChange = (e: CustomEvent) => {
-      console.log('트랜잭션 변경 이벤트 감지:', e.detail?.type);
-      
-      // 처리 중 중복 호출 방지
-      if (isProcessing) return;
-      
-      isProcessing = true;
-      setTimeout(() => {
-        loadTransactions();
-        isProcessing = false;
-      }, 150);
-    };
-    
-    // 스토리지 이벤트
+    // 각 이벤트별 핸들러 생성
+    const handleTransactionUpdate = handleEvent('트랜잭션 업데이트', 150);
+    const handleTransactionDelete = handleEvent('트랜잭션 삭제', 200);
+    const handleTransactionChange = handleEvent('트랜잭션 변경', 150);
     const handleStorageEvent = (e: StorageEvent) => {
       if (e.key === 'transactions' || e.key === null) {
-        console.log('스토리지 이벤트 감지:', e.key);
-        
-        // 처리 중 중복 호출 방지
-        if (isProcessing) return;
-        
-        isProcessing = true;
-        setTimeout(() => {
-          loadTransactions();
-          isProcessing = false;
-        }, 150);
+        handleEvent('스토리지', 150)();
       }
     };
-    
-    // 포커스 이벤트
-    const handleFocus = () => {
-      console.log('창 포커스: 트랜잭션 새로고침');
-      
-      // 처리 중 중복 호출 방지
-      if (isProcessing) return;
-      
-      isProcessing = true;
-      setTimeout(() => {
-        loadTransactions();
-        isProcessing = false;
-      }, 200);
-    };
+    const handleFocus = handleEvent('포커스', 200);
     
     // 이벤트 리스너 등록
     window.addEventListener('transactionUpdated', handleTransactionUpdate);
@@ -94,19 +62,27 @@ export const useTransactionsEvents = (
     window.addEventListener('storage', handleStorageEvent);
     window.addEventListener('focus', handleFocus);
     
-    // 새로고침 키가 변경되면 데이터 로드
-    if (!isProcessing) {
+    // 초기 데이터 로드
+    if (!isProcessingRef.current) {
       loadTransactions();
     }
     
     // 클린업 함수
     return () => {
-      console.log('useTransactions - 이벤트 리스너 제거');
+      console.log('[이벤트] 이벤트 리스너 정리');
+      
+      // 모든 이벤트 리스너 제거
       window.removeEventListener('transactionUpdated', handleTransactionUpdate);
       window.removeEventListener('transactionDeleted', handleTransactionDelete);
       window.removeEventListener('transactionChanged', handleTransactionChange as EventListener);
       window.removeEventListener('storage', handleStorageEvent);
       window.removeEventListener('focus', handleFocus);
+      
+      // 모든 진행 중인 타임아웃 정리
+      clearAllTimeouts();
+      
+      // 처리 상태 초기화
+      isProcessingRef.current = false;
     };
   }, [loadTransactions, refreshKey]);
 };