fix: 수정을 받고 싶은 상태로 변경한다;

hanghae-plus · Jan 5, 2025 · c7e7130 · c7e7130
1 parent 0580826
commit c7e7130
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">