fix: obejct dependency를 가지는 함수 useEffect -> useDeepCompareCallback

package.json

@@ -47,6 +47,7 @@
     "react-textarea-autosize": "^8.5.3",
     "sonner": "^1.5.0",
     "ts-pattern": "^5.3.1",
+    "use-deep-compare": "^1.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/pages/ClubPage.tsx

@@ -1,6 +1,7 @@
 import { css, cva } from '@styled-system/css'
 import { ChevronDown } from 'lucide-react'
 import { useCallback, useState } from 'react'
+import { useDeepCompareCallback } from 'use-deep-compare'
 
 import { useGetClubSearch, usePostClubLike } from '@/api/hooks/club'
 import CategoryDrawer from '@/components/club/CategoryDrawer'
@@ -26,37 +27,37 @@ const ClubPage = () => {
   const { data } = useGetClubSearch({ ...query, isLogin })
   const { mutate: likeClub } = usePostClubLike()
 
-  const setCategory = useCallback(
+  const setCategory = useDeepCompareCallback(
     (target: CategoryType) => {
       setQuery({ ...query, category: target ?? undefined })
     },
-    [setQuery, query],
+    [query],
   )
 
-  const handleSubmit = useCallback(
+  const handleSubmit = useDeepCompareCallback(
     (inputKeyword: string) => {
       if (inputKeyword === '') setQuery({ ...query, keyword: '' })
-      else setQuery({ ...query, keyword: inputKeyword })
+      else setQuery({ ...query, keyword: inputKeyword.length ? inputKeyword : undefined })
     },
-    [setQuery, query],
+    [query],
   )
 
-  const clearKeyword = useCallback(() => {
-    setQuery({ ...query, keyword: '' })
-  }, [setQuery, query])
+  const clearKeyword = useDeepCompareCallback(() => {
+    setQuery({ ...query, keyword: undefined })
+  }, [query])
 
-  const handleLikeClick = useCallback(
+  const handleLikeClick = useDeepCompareCallback(
     (clubId: number) => {
       if (isLogin) likeClub({ clubId, queryParams: { ...query, isLogin } })
       else alert('Please sign in to use!')
     },
     [likeClub, query, isLogin],
   )
 
-  const handleWishList = useCallback(() => {
+  const handleWishList = useDeepCompareCallback(() => {
     if (isLogin) setQuery({ ...query, wishList: !query.wishList })
     else alert('Please sign in to use!')
-  }, [setQuery, isLogin, query])
+  }, [query, isLogin])
 
   const [selectedClub, setSelectedClub] = useState<ClubInterface | null>(null)
 

yarn.lock

@@ -2256,7 +2256,7 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-dequal@^2.0.3:
+dequal@2.0.3, dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -4675,6 +4675,13 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
+use-deep-compare@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-deep-compare/-/use-deep-compare-1.3.0.tgz#b36d304072d306e6bf27ca5653f3277dd66d2c0d"
+  integrity sha512-94iG+dEdEP/Sl3WWde+w9StIunlV8Dgj+vkt5wTwMoFQLaijiEZSXXy8KtcStpmEDtIptRJiNeD4ACTtVvnIKA==
+  dependencies:
+    dequal "2.0.3"
+
 use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"