최초 과제 수행

src/@lib/equalities/deepEquals.ts

@@ -1,3 +1,69 @@
+// export function deepEquals<T>(objA: T, objB: T): boolean {
+//   if (typeof objA === "object" && typeof objB === "object") {
+//     if (objA == null && objB == null) {
+//       return true;
+//     }
+//     if (Object.keys(objA).length === Object.keys(objB).length) {
+//       for (const key of Object.keys(objA)) {
+//         if (typeof objA[key] === "object" && typeof objB[key] === "object") {
+//           return deepEquals(objA[key], objB[key]);
+//         }
+//         if (objA[key] !== objB[key]) {
+//           return false;
+//         }
+//       }
+//       return true;
+//     } else {
+//       return false;
+//     }
+//   } else {
+//     return objA === objB;
+//   }
+// }
+
 export function deepEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
-}
+  // 기본 타입이거나 null/undefined인 경우
+  if (objA === objB) {
+    return true;
+  }
+
+  // null/undefined 체크
+  if (objA == null || objB == null) {
+    return false;
+  }
+
+  // 배열 체크
+  if (Array.isArray(objA) && Array.isArray(objB)) {
+    if (objA.length !== objB.length) {
+      return false;
+    }
+    for (let i = 0; i < objA.length; i++) {
+      if (!deepEquals(objA[i], objB[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // 객체 체크
+  if (typeof objA === "object" && typeof objB === "object") {
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+      return false;
+    }
+
+    for (const key of keysA) {
+      if (!keysB.includes(key)) {
+        return false;
+      }
+      if (!deepEquals(objA[key], objB[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  return false;
+}

src/@lib/equalities/shallowEquals.ts

@@ -1,3 +1,26 @@
 export function shallowEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
+
+  // 두 값이 정확히 같은지 확인(참조가 같은 경우)
+  if (objA === objB) {
+    return true;
+  }
+
+  if (objA === null || objB === null) {
+    return objA === objB;
+  }
+
+  if (typeof objA === "object" && typeof objB === "object") {
+    if (Object.keys(objA).length !== Object.keys(objB).length) {
+      return false;
+    } else {
+      for (const key of Object.keys(objA)) {
+        if (objA[key] !== objB[key]) {
+          return false;
+        }
+      }
+      return true;
+    }
+  } else {
+    return objA === objB;
+  }
 }

src/@lib/hocs/memo.ts

@@ -6,5 +6,17 @@ export function memo<P extends object>(
   Component: ComponentType<P>,
   _equals = shallowEquals,
 ) {
-  return Component;
+  let oldProps = null;
+  let prevResult = null;
+  return (props) => {
+    if (!oldProps || !_equals(oldProps, props)) {
+      prevResult = Component(props);
+    }
+
+    // 현재 props를 이전 props로 저장
+    oldProps = props;
+
+    // 메모이제이션된 결과 반환
+    return prevResult;
+  }
 }

src/@lib/hooks/useCallback.ts

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-unsafe-function-type */
 import { DependencyList } from "react";
+import {useMemo} from "./useMemo.ts";
+import {deepEquals, shallowEquals} from "../equalities";
+import {useRef} from "./useRef.ts";
 
 export function useCallback<T extends Function>(
   factory: T,
   _deps: DependencyList,
 ) {
-  // 직접 작성한 useMemo를 통해서 만들어보세요.
-  return factory as T;
+  return useMemo(() => factory, _deps);
 }

src/@lib/hooks/useMemo.ts

@@ -1,12 +1,19 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { DependencyList } from "react";
 import { shallowEquals } from "../equalities";
+import {useRef} from "./useRef.ts";
 
 export function useMemo<T>(
   factory: () => T,
   _deps: DependencyList,
   _equals = shallowEquals,
 ): T {
   // 직접 작성한 useRef를 통해서 만들어보세요.
-  return factory();
+  const ref = useRef(0);
+  const result = useRef(0);
+  if (!_equals(ref.current, _deps)) {
+    ref.current = _deps;
+    result.current = factory();
+  }
+  return result.current;
 }

src/@lib/hooks/useRef.ts

@@ -1,4 +1,7 @@
+import {useState} from "react";
+
 export function useRef<T>(initialValue: T): { current: T } {
   // React의 useState를 이용해서 만들어보세요.
-  return { current: initialValue };
+  const [data, setData] = useState<any>({current : initialValue});
+  return data;
 }