refactor: [TA-194] 인라인 함수 props 제거로 불필요한 리렌더링 방지 (useCallback/useMemo)

src/components/FilterBar/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import icn_reset from "../../assets/svgs/icn_reset.svg";
 import icn_line from "../../assets/svgs/icn_filterLine.svg";
 import FilterType from "./FilterType";
@@ -19,23 +19,26 @@ export default function FilterBar({ isEvent, setSearchParams }: Props) {
   const [showSelectBar, setShowSelectBar] = useState(false);
   const [clickedFilter, setClickedFilter] = useState("");
 
-  const getDefaultFilters = () =>
-    isEvent
-      ? {
-          progressStatus: "ALL",
-          sortType: "LATEST",
-        }
-      : {
-          sortType: "LATEST",
-        };
+  const getDefaultFilters = useCallback(
+    () =>
+      isEvent
+        ? {
+            progressStatus: "ALL",
+            sortType: "LATEST",
+          }
+        : {
+            sortType: "LATEST",
+          },
+    [isEvent],
+  );
 
   const [filters, setFilters] = useState<any>(getDefaultFilters());
 
   const [selectedLocs, setSelectedLocs] = useState<string[]>([]);
 
-  const handleFilterChange = (key: string, value: any) => {
+  const handleFilterChange = useCallback((key: string, value: any) => {
     setFilters((prevFilters: any) => ({ ...prevFilters, [key]: value }));
-  };
+  }, []);
 
   useEffect(() => {
     const newSearchParams = new URLSearchParams();
@@ -49,40 +52,55 @@ export default function FilterBar({ isEvent, setSearchParams }: Props) {
     setSearchParams(newSearchParams);
   }, [filters, setSearchParams]);
 
-  const handleResetFilter = () => {
+  const handleSetFree = useCallback(
+    () => handleFilterChange("type", "FREE"),
+    [handleFilterChange],
+  );
+  const handleSetDiscount = useCallback(
+    () => handleFilterChange("type", "DISCOUNT"),
+    [handleFilterChange],
+  );
+  const handleClearType = useCallback(
+    () => handleFilterChange("type", ""),
+    [handleFilterChange],
+  );
+
+  const handleResetFilter = useCallback(() => {
     setIsModifiedOrder(false);
     setIsModifiedState(false);
     setIsModifiedRegion(false);
     setIsModifiedTypes(false);
     setFilters(getDefaultFilters());
-  };
+  }, [getDefaultFilters]);
 
-  const handleFilter = (type: string) => {
+  const handleFilter = useCallback((type: string) => {
     setShowSelectBar(true);
     setClickedFilter(type);
-  };
+  }, []);
+
+  const handleCloseSelectBar = useCallback(() => setShowSelectBar(false), []);
 
   return (
     <div className="w-full">
       <div className="flex items-center gap-2 min-w-full h-[3.75rem] p-3 text-sm font-medium whitespace-nowrap overflow-x-scroll">
         <button
           className="flex items-center justify-center mr-1 outline-none min-w-9 h-9 bg-gray100 rounded-3xl"
-          onClick={() => handleResetFilter()}
+          onClick={handleResetFilter}
         >
           <img className="p-[0.37rem]" src={icn_reset} alt="필터 초기화" />
         </button>
         {isEvent && (
           <div className="flex gap-2">
             <BtnOnOff
               isOn={filters.type === "FREE"}
-              setOn={() => handleFilterChange("type", "FREE")}
-              setOff={() => handleFilterChange("type", "")}
+              setOn={handleSetFree}
+              setOff={handleClearType}
               title="무료"
             />
             <BtnOnOff
               isOn={filters.type === "DISCOUNT"}
-              setOn={() => handleFilterChange("type", "DISCOUNT")}
-              setOff={() => handleFilterChange("type", "")}
+              setOn={handleSetDiscount}
+              setOff={handleClearType}
               title="할인"
             />
             <img src={icn_line} alt="" />
@@ -119,7 +137,7 @@ export default function FilterBar({ isEvent, setSearchParams }: Props) {
         <div className="fixed bottom-0 z-40 flex items-end h-screen w-full max-w-[430px]">
           <div
             className="absolute top-0 w-full h-screen bg-black bg-opacity-40"
-            onClick={() => setShowSelectBar(false)}
+            onClick={handleCloseSelectBar}
           />
           <div
             className={`w-full ${showSelectBar ? "animate-slideUp" : "hidden"}`}

src/components/PhotographerBox/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   savePhotographer,
   deleteSavedPhotographer,
@@ -28,41 +28,47 @@ export default function PhotographerBox({ data }: Props) {
 
   useEffect(() => {
     setIsClipped(data.isSaved);
-  }, [data]);
+  }, [data.isSaved]);
 
-  const handleTextLength = () => {
-    if (data.nickname.length < 8) return data.nickname;
-    return `${data.nickname.slice(0, 8)}...`;
-  };
+  const nickname = useMemo(
+    () =>
+      data.nickname.length < 8
+        ? data.nickname
+        : `${data.nickname.slice(0, 8)}...`,
+    [data.nickname],
+  );
 
-  const onClickPhotographer = () => {
+  const onClickPhotographer = useCallback(() => {
     window.open(`/photographer/${data.id}`);
-  };
+  }, [data.id]);
 
-  const onClickSave = () => {
-    requireLogin(() => savePhotographerFunc(isClipped));
-  };
+  const savePhotographerFunc = useCallback(
+    async (clipped: boolean) => {
+      try {
+        setIsClipped(!clipped);
+        clipped
+          ? await deleteSavedPhotographer(data.id)
+          : await savePhotographer(data.id);
+      } catch (e) {
+        setIsClipped(clipped);
+        setShowLoginModal(true);
+        console.log(e);
+      }
+    },
+    [data.id, setShowLoginModal],
+  );
 
-  const savePhotographerFunc = async (isClipped: boolean) => {
-    try {
-      setIsClipped(!isClipped);
-      isClipped
-        ? await deleteSavedPhotographer(data.id)
-        : await savePhotographer(data.id);
-    } catch (e) {
-      setIsClipped(false);
-      setShowLoginModal(true);
-      console.log(e);
-    }
-  };
+  const onClickSave = useCallback(() => {
+    requireLogin(() => savePhotographerFunc(isClipped));
+  }, [requireLogin, savePhotographerFunc, isClipped]);
 
   if (!data) return <></>;
   return (
     <div>
       <div className="relative flex flex-col justify-between w-full text-white cursor-pointer h-44 bg-gray rounded-xl">
         <div
           className="absolute top-0 left-0 z-0 w-full h-full"
-          onClick={() => onClickPhotographer()}
+          onClick={onClickPhotographer}
         >
           <div className="relative inline-block w-full h-full overflow-hidden rounded-xl">
             <img
@@ -78,12 +84,12 @@ export default function PhotographerBox({ data }: Props) {
             <img
               alt="clip"
               src={isClipped ? icn_clipOn : icn_clipOff}
-              onClick={() => onClickSave()}
+              onClick={onClickSave}
             />
           </div>
         </div>
-        <div className="z-10 p-3" onClick={() => onClickPhotographer()}>
-          <div className="font-semibold">{handleTextLength()}</div>
+        <div className="z-10 p-3" onClick={onClickPhotographer}>
+          <div className="font-semibold">{nickname}</div>
           <div className="flex items-center gap-1 text-xs">
             {data.mainPhotographyTypes.map((type, index) => (
               <div key={index}>

src/components/PromotionBox/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { savePromotion, deleteSavedPromotion } from "../../api/promotion";
 import { useLoginGuard } from "../../hooks/useLoginGuard";
@@ -37,37 +37,42 @@ export default function PromotionBox({ data }: Props) {
   useEffect(() => {
     setIsClipped(data.isSaved);
     setSaveCount(data.saveCount);
-  }, [data]);
+  }, [data.isSaved, data.saveCount]);
 
-  const onClickSave = () => {
-    requireLogin(() => savePromotionFunc(isClipped));
-  };
+  const dDayText = useMemo(() => getDDayText(data.endedAt), [data.endedAt]);
+
+  const savePromotionFunc = useCallback(
+    async (clipped: boolean) => {
+      try {
+        setIsClipped(!clipped);
+        setSaveCount((prev) => (clipped ? prev - 1 : prev + 1));
+        clipped
+          ? await deleteSavedPromotion(data.id)
+          : await savePromotion(data.id);
+      } catch (e) {
+        setIsClipped(clipped);
+        setSaveCount((prev) => (clipped ? prev + 1 : prev - 1));
+        setShowLoginModal(true);
+        console.log(e);
+      }
+    },
+    [data.id, setShowLoginModal],
+  );
 
-  const savePromotionFunc = async (isClipped: boolean) => {
-    try {
-      setIsClipped(!isClipped);
-      setSaveCount(isClipped ? saveCount - 1 : saveCount + 1);
-      isClipped
-        ? await deleteSavedPromotion(data.id)
-        : await savePromotion(data.id);
-    } catch (e) {
-      setIsClipped(false);
-      setSaveCount(isClipped ? saveCount + 1 : saveCount - 1);
-      setShowLoginModal(true);
-      console.log(e);
-    }
-  };
+  const onClickSave = useCallback(() => {
+    requireLogin(() => savePromotionFunc(isClipped));
+  }, [requireLogin, savePromotionFunc, isClipped]);
 
-  const openDetailPage = () => {
+  const openDetailPage = useCallback(() => {
     isMobileDevice()
       ? navigate(`/event/${data.id}`)
       : window.open(`/event/${data.id}`);
-  };
+  }, [data.id, navigate]);
 
   return (
     <div className="flex flex-col py-5 cursor-pointer">
       <div className="flex items-start justify-between px-4">
-        <div className="flex flex-col flex-1" onClick={() => openDetailPage()}>
+        <div className="flex flex-col flex-1" onClick={openDetailPage}>
           <span className="mb-1 text-lg font-semibold">{data.title}</span>
           <div className="flex items-center gap-[0.38rem] text-sm text-black02">
             {data.author && !data.author.isAdmin && (
@@ -88,13 +93,13 @@ export default function PromotionBox({ data }: Props) {
           <img
             alt="clip"
             src={isClipped ? icn_clipOn : icn_clipOff}
-            onClick={() => onClickSave()}
+            onClick={onClickSave}
           />
         </div>
       </div>
       <div
         className="flex w-full gap-3 py-3 pl-4 pr-4 overflow-x-auto "
-        onClick={() => openDetailPage()}
+        onClick={openDetailPage}
       >
         {data.images.map((image, index) => (
           <div key={index} className="gap-[0.62rem]">
@@ -110,11 +115,11 @@ export default function PromotionBox({ data }: Props) {
       </div>
       <div
         className="flex flex-col gap-1 pl-4 text-xs text-black03 "
-        onClick={() => openDetailPage()}
+        onClick={openDetailPage}
       >
         <div className="flex items-center gap-1">
           <img src={icn_time} alt="" />
-          <span>{getDDayText(data.endedAt)}</span>
+          <span>{dDayText}</span>
         </div>
         <div className="flex items-center gap-1">
           <img src={icn_location} alt="" />

src/hooks/useLoginGuard.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 interface UseLoginGuardReturn {
@@ -19,25 +19,33 @@ export function useLoginGuard(): UseLoginGuardReturn {
   const navigate = useNavigate();
   const [showLoginModal, setShowLoginModal] = useState(false);
 
-  const requireLogin = (onAuthorized: () => void) => {
-    if (!localStorage.getItem("accessToken")) {
-      setShowLoginModal(true);
-      return;
-    }
-    onAuthorized();
-  };
+  const requireLogin = useCallback(
+    (onAuthorized: () => void) => {
+      if (!localStorage.getItem("accessToken")) {
+        setShowLoginModal(true);
+        return;
+      }
+      onAuthorized();
+    },
+    [setShowLoginModal],
+  );
 
-  const loginModalProps = {
-    title: ["로그인이 필요한 서비스입니다."],
-    content: [
-      "이 기능은 로그인 후 이용하실 수 있습니다.",
-      "로그인 페이지로 이동하시겠습니까?",
-    ],
-    btnMsg: "로그인 하기",
-    align: "start" as const,
-    setShowModal: setShowLoginModal,
-    onClick: () => navigate("/login"),
-  };
+  const handleNavigateLogin = useCallback(() => navigate("/login"), [navigate]);
+
+  const loginModalProps = useMemo(
+    () => ({
+      title: ["로그인이 필요한 서비스입니다."],
+      content: [
+        "이 기능은 로그인 후 이용하실 수 있습니다.",
+        "로그인 페이지로 이동하시겠습니까?",
+      ],
+      btnMsg: "로그인 하기",
+      align: "start" as const,
+      setShowModal: setShowLoginModal,
+      onClick: handleNavigateLogin,
+    }),
+    [setShowLoginModal, handleNavigateLogin],
+  );
 
   return { showLoginModal, setShowLoginModal, requireLogin, loginModalProps };
 }