fix: ItemContext를 제거합니다

ItemContext을 지정했을 때 리렌더링 되는 영역에 대한 Context 정의할 이유가 부족합니다. 따라서 기존의 context를 제거합니다

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-stagedx

src/@lib/equalities/deepEquals.ts

@@ -38,11 +38,7 @@ export function deepEquals<T>(objA: T, objB: T): boolean {
 
   // 5. 모든 키에 대해 깊은 비교 수행
   for (const key of keysA) {
-    if (
-      // Q. hasOwn에 에러가 발생합니다 어떻게 수정해야 좋을까요
-      !Object.hasOwn(objB as object, key) ||
-      !deepEquals((objA as any)[key], (objB as any)[key])
-    ) {
+    if (!deepEquals(objA[key as keyof T], objB[key as keyof T])) {
       return false;
     }
   }

src/App.tsx

@@ -2,7 +2,6 @@ import { Header } from "./components/Header";
 import { ItemList } from "./components/ItemList";
 import { ComplexForm } from "./components/ComplexForm";
 import { ThemeContextProvider } from "./context/ThemeContext";
-import { ItemContextProvider, useItems } from "./context/ItemContext";
 import { UserContextProvider } from "./context/UserContext";
 import { NotificationContextProvider } from "./context/NotificationContext";
 import { NotificationSystem } from "./components/NotificationSystem";
@@ -12,33 +11,24 @@ const App = () => {
     <ThemeContextProvider>
       <NotificationContextProvider>
         <UserContextProvider>
-          <ItemContextProvider>
-            <Header />
-            <MainContent />
-            <NotificationSystem />
-          </ItemContextProvider>
+          {/* <ItemContextProvider> */}
+          <Header />
+          <div className="container mx-auto px-4 py-8">
+            <div className="flex flex-col md:flex-row">
+              <div className="w-full md:w-1/2 md:pr-4">
+                <ItemList />
+              </div>
+              <div className="w-full md:w-1/2 md:pl-4">
+                <ComplexForm />
+              </div>
+            </div>
+          </div>
+          <NotificationSystem />
+          {/* </ItemContextProvider> */}
         </UserContextProvider>
       </NotificationContextProvider>
     </ThemeContextProvider>
   );
 };
 
-// 아이템 리스트와 폼을 포함하는 메인 컨텐츠
-const MainContent = () => {
-  const { items, addItems } = useItems();
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex flex-col md:flex-row">
-        <div className="w-full md:w-1/2 md:pr-4">
-          <ItemList items={items} onAddItemsClick={addItems} />
-        </div>
-        <div className="w-full md:w-1/2 md:pl-4">
-          <ComplexForm />
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export default App;

src/components/ItemList.tsx

@@ -1,16 +1,26 @@
-import { useState } from "react";
-import { Item } from "../types";
-import { renderLog } from "../utils";
+import { useCallback, useState } from "react";
+// import { Item } from "../types";
+import { generateItems, renderLog } from "../utils";
 import { useTheme } from "../context/ThemeContext";
 
-export const ItemList: React.FC<{
-  items: Item[];
-  onAddItemsClick: () => void;
-}> = ({ items, onAddItemsClick }) => {
+export const ItemList: React.FC = () => {
   renderLog("ItemList rendered");
   const [filter, setFilter] = useState("");
   const { theme } = useTheme();
 
+  // () => generateItems(1000): 왜 이렇게하면 괜찮을까?
+  // 화살표 함수를 했을 때는 첫 렌더링 시에만
+  // generateItems, 컴포넌트가 리렌더링 될때마다 호출하게 된다
+  // gus
+  const [items, setItems] = useState(() => generateItems(1000));
+
+  const addItems = useCallback(() => {
+    setItems((prevItems) => [
+      ...prevItems,
+      ...generateItems(1000, prevItems.length),
+    ]);
+  }, []);
+
   const filteredItems = items.filter(
     (item) =>
       item.name.toLowerCase().includes(filter.toLowerCase()) ||
@@ -29,7 +39,7 @@ export const ItemList: React.FC<{
           <button
             type="button"
             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-xs"
-            onClick={onAddItemsClick}
+            onClick={addItems}
           >
             대량추가
           </button>

src/context/ItemContext.tsx

@@ -23,23 +23,6 @@ const ItemContext = createContext<ItemContextType | null>(null);
 
 // 3. provider
 export const ItemContextProvider = ({ children }: PropsWithChildren) => {
-  const [items, setItems] = useState(generateItems(1000));
-
-  const addItems = useCallback(() => {
-    setItems((prevItems) => [
-      ...prevItems,
-      ...generateItems(1000, prevItems.length),
-    ]);
-  }, []);
-
-  const value = useMemo(
-    () => ({
-      items,
-      addItems,
-    }),
-    [items, addItems]
-  );
-
   return <ItemContext.Provider value={value}>{children}</ItemContext.Provider>;
 };