🐛 와우! 마지막 테스트 통과 로직 구현

src/components/common/header.tsx

@@ -1,11 +1,12 @@
+import { memo } from "../../@lib";
 import { useAuthContext } from "../../providers/auth-provider";
 import {
   useThemeContext,
   useUpdateThemeContext,
 } from "../../providers/theme-provider";
 import { renderLog } from "../../utils";
 
-const Header = () => {
+const Header: React.FC = memo(() => {
   renderLog("Header rendered");
   const { user, login, logout } = useAuthContext();
   const theme = useThemeContext();
@@ -52,6 +53,6 @@ const Header = () => {
       </div>
     </header>
   );
-};
+});
 
 export default Header;

src/components/item-list.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { memo } from "../@lib";
 import { useThemeContext } from "../providers/theme-provider";
 import { renderLog } from "../utils";
 
@@ -9,12 +10,10 @@ interface Item {
   price: number;
 }
 
-interface ItemListProps {
+export const ItemList: React.FC<{
   items: Item[];
   onAddItemsClick: () => void;
-}
-
-export const ItemList = ({ items, onAddItemsClick }: ItemListProps) => {
+}> = memo(({ items, onAddItemsClick }) => {
   renderLog("ItemList rendered");
   const [filter, setFilter] = useState("");
   const theme = useThemeContext();
@@ -67,4 +66,4 @@ export const ItemList = ({ items, onAddItemsClick }: ItemListProps) => {
       </ul>
     </div>
   );
-};
+});

src/components/layout.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
+import { useMemo } from "../@lib";
 import { useThemeContext } from "../providers/theme-provider";
 import { generateItems } from "../utils";
 import Header from "./common/header";
@@ -9,13 +10,14 @@ import NotificationSystem from "./notification-system";
 
 const CommonLayout = () => {
   const theme = useThemeContext();
-  const [items, setItems] = useState(generateItems(1000));
-  const addItems = () => {
+  const memoizedItems = useMemo(() => generateItems(1000), []);
+  const [items, setItems] = useState(memoizedItems);
+  const addItems = useCallback(() => {
     setItems((prevItems) => [
       ...prevItems,
       ...generateItems(1000, prevItems.length),
     ]);
-  };
+  }, []);
 
   return (
     <div

src/components/notification-system.tsx

@@ -3,7 +3,7 @@ import { useNotificationContext } from "../providers/notification-provider";
 
 import { renderLog } from "../utils";
 
-const NotificationSystem = memo(() => {
+const NotificationSystem: React.FC = memo(() => {
   renderLog("NotificationSystem rendered");
   const { notifications, removeNotification } = useNotificationContext();