From c7e7130d782646be3c66083640e381b30c3646d5 Mon Sep 17 00:00:00 2001
From: Gyeongmin Kim <gmkim716@gmail.com>
Date: Sun, 5 Jan 2025 17:18:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=88=98=EC=A0=95=EC=9D=84=20=EB=B0=9B?=
 =?UTF-8?q?=EA=B3=A0=20=EC=8B=B6=EC=9D=80=20=EC=83=81=ED=83=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@lib/hooks/ver1/useItem.ts  | 12 +++++-----
 src/@lib/hooks/ver2/useItem.ts  |  4 ++--
 src/@lib/hooks/ver2/usePrice.ts |  5 ++--
 src/components/ItemList.tsx     | 42 ++++++++++++++++++---------------
 4 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/@lib/hooks/ver1/useItem.ts b/src/@lib/hooks/ver1/useItem.ts
index 4fb709a..12389bd 100644
--- a/src/@lib/hooks/ver1/useItem.ts
+++ b/src/@lib/hooks/ver1/useItem.ts
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import { generateItems } from "../../../utils";
 import { ITEMS_LENGTH } from "../../../const";
 
-export const useHandleItem = () => {
+export function useItem() {
   const [items, setItems] = useState(() => generateItems(ITEMS_LENGTH));
   const [filter, setFilter] = useState("");
 
@@ -18,19 +18,19 @@ export const useHandleItem = () => {
       items.filter(
         (item) =>
           item.name.toLowerCase().includes(filter.toLowerCase()) ||
-          item.category.toLowerCase().includes(filter.toLowerCase()),
+          item.category.toLowerCase().includes(filter.toLowerCase())
       ),
-    [items, filter],
+    [items, filter]
   );
 
   const totalPrice = useMemo(
     () => filteredItems.reduce((sum, item) => sum + item.price, 0),
-    [filteredItems],
+    [filteredItems]
   );
 
   const averagePrice = useMemo(
     () => Math.round(totalPrice / filteredItems.length) || 0,
-    [totalPrice, filteredItems.length],
+    [totalPrice, filteredItems.length]
   );
 
   return {
@@ -41,4 +41,4 @@ export const useHandleItem = () => {
     totalPrice,
     averagePrice,
   };
-};
+}
diff --git a/src/@lib/hooks/ver2/useItem.ts b/src/@lib/hooks/ver2/useItem.ts
index 1c4950e..be29ae1 100644
--- a/src/@lib/hooks/ver2/useItem.ts
+++ b/src/@lib/hooks/ver2/useItem.ts
@@ -18,9 +18,9 @@ export function useItem() {
       items.filter(
         (item) =>
           item.name.toLowerCase().includes(filter.toLowerCase()) ||
-          item.category.toLowerCase().includes(filter.toLowerCase()),
+          item.category.toLowerCase().includes(filter.toLowerCase())
       ),
-    [items, filter],
+    [items, filter]
   );
 
   return {
diff --git a/src/@lib/hooks/ver2/usePrice.ts b/src/@lib/hooks/ver2/usePrice.ts
index 0c809cc..3294466 100644
--- a/src/@lib/hooks/ver2/usePrice.ts
+++ b/src/@lib/hooks/ver2/usePrice.ts
@@ -3,15 +3,14 @@ import { useItem } from "./useItem";
 
 export function usePrice() {
   const { filteredItems } = useItem();
-
   const totalPrice = useMemo(
     () => filteredItems.reduce((sum, item) => sum + item.price, 0),
-    [filteredItems],
+    [filteredItems]
   );
 
   const averagePrice = useMemo(
     () => Math.round(totalPrice / filteredItems.length) || 0,
-    [totalPrice],
+    [totalPrice]
   );
 
   return { totalPrice, averagePrice };
diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx
index ed740db..c36f61b 100644
--- a/src/components/ItemList.tsx
+++ b/src/components/ItemList.tsx
@@ -1,33 +1,37 @@
-import { useCallback, useState } from "react";
-import { generateItems, renderLog } from "../utils";
+import { useState } from "react";
+import { renderLog } from "../utils";
 import { useTheme } from "../context/ThemeContext";
-import { ITEMS_LENGTH } from "../const";
+import { usePrice } from "../@lib/hooks/ver2/usePrice";
+import { useItem } from "../@lib/hooks/ver2/useItem";
 
 export const ItemList: React.FC = () => {
   renderLog("ItemList rendered");
   const [filter, setFilter] = useState("");
   const { theme } = useTheme();
 
+  // Question. 훅으로 분리한다면?
+  const { filteredItems, addItems } = useItem();
+  const { totalPrice, averagePrice } = usePrice();
+
+  // 이전 코드
   // () => generateItems(1000): 화살표 함수를 했을 때는 첫 렌더링 시에만
   // generateItems, 컴포넌트가 리렌더링될때마다 호출하게 된다
-  const [items, setItems] = useState(() => generateItems(ITEMS_LENGTH));
-
-  const addItems = useCallback(() => {
-    setItems((prevItems) => [
-      ...prevItems,
-      ...generateItems(ITEMS_LENGTH, prevItems.length),
-    ]);
-  }, []);
-
-  const filteredItems = items.filter(
-    (item) =>
-      item.name.toLowerCase().includes(filter.toLowerCase()) ||
-      item.category.toLowerCase().includes(filter.toLowerCase()),
-  );
+  // const [items, setItems] = useState(() => generateItems(ITEMS_LENGTH));
+  // const addItems = useCallback(() => {
+  //   setItems((prevItems) => [
+  //     ...prevItems,
+  //     ...generateItems(ITEMS_LENGTH, prevItems.length),
+  //   ]);
+  // }, []);
 
-  const totalPrice = filteredItems.reduce((sum, item) => sum + item.price, 0);
+  // const filteredItems = items.filter(
+  //   (item) =>
+  //     item.name.toLowerCase().includes(filter.toLowerCase()) ||
+  //     item.category.toLowerCase().includes(filter.toLowerCase()),
+  // );
 
-  const averagePrice = Math.round(totalPrice / filteredItems.length) || 0;
+  // const totalPrice = filteredItems.reduce((sum, item) => sum + item.price, 0);
+  // const averagePrice = Math.round(totalPrice / filteredItems.length) || 0;
 
   return (
     <div className="mt-8">