feat: #43 - useModalLogic 훅에 useCallback 추가

Team-TenTen · Nov 4, 2023 · 5d3e665 · 5d3e665
1 parent 920a0de
commit 5d3e665
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/src/components/common/Modal/hooks/useModalLogic.ts b/src/components/common/Modal/hooks/useModalLogic.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
 export interface useModalLogicProps {
   onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void
@@ -29,16 +29,22 @@ const useModalLogic = ({
     }
   }, [onClose, onConfirm])
 
-  const handleClickOverlay = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === modalRef.current) {
-      onClose()
-    }
-  }
+  const handleClickOverlay = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === modalRef.current) {
+        onClose()
+      }
+    },
+    [modalRef, onClose],
+  )
 
-  const handleClickConfirm = (e?: React.MouseEvent<HTMLButtonElement>) => {
-    onConfirm?.()
-    onClose()
-  }
+  const handleClickConfirm = useCallback(
+    (e?: React.MouseEvent<HTMLButtonElement>) => {
+      onConfirm?.()
+      onClose()
+    },
+    [onConfirm, onClose],
+  )
 
   return { handleClickOverlay, handleClickConfirm }
 }