[8팀 김도운] [Chapter 1-3] React, Beyond the Basics

package.json

@@ -38,11 +38,12 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^2.1.2",
+    "@vitest/ui": "^2.1.8",
     "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",

src/@lib/equalities/deepEquals.ts

@@ -1,3 +1,43 @@
+import { isObject } from "../utils";
+
 export function deepEquals<T>(objA: T, objB: T): boolean {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+
+  if (Array.isArray(objA) && Array.isArray(objB)) {
+    return _deepEqualArray(objA, objB);
+  }
+
+  if (isObject(objA) && isObject(objB)) {
+    return _deepEqualObject(
+      objA as Record<string | number | symbol, unknown>,
+      objB as Record<string | number | symbol, unknown>,
+    );
+  }
+
   return objA === objB;
 }
+
+function _deepEqualArray<T>(arrA: Array<T>, arrB: Array<T>): boolean {
+  if (arrA.length !== arrB.length) return false;
+  return arrA.every((item, index) => deepEquals(item, arrB[index]));
+}
+
+function _deepEqualObject<T extends string | number | symbol>(
+  objA: Record<T, unknown>,
+  objB: Record<T, unknown>,
+): boolean {
+  if (objA === objB) return true;
+
+  const keysA = Object.keys(objA) as T[];
+  const keysB = Object.keys(objB) as T[];
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  return keysA.every(
+    (key) => keysB.includes(key) && deepEquals(objA[key], objB[key]),
+  );
+}

src/@lib/equalities/shallowEquals.ts

@@ -1,3 +1,46 @@
+import { isObject } from "../utils";
+
 export function shallowEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
+  if (Object.is(objA, objB)) return true;
+
+  if (Array.isArray(objA) && Array.isArray(objB)) {
+    return _shallowEqualArray(objA, objB);
+  }
+
+  if (isObject(objA) && isObject(objB)) {
+    return _shallowEqualObject(
+      objA as Record<string, unknown>,
+      objB as Record<string, unknown>,
+    );
+  }
+
+  return false;
+}
+
+function _shallowEqualArray<T>(arrA: Array<T>, arrB: Array<T>): boolean {
+  if (arrA.length !== arrB.length) return false;
+  return arrA.every((item, index) => item === arrB[index]);
+}
+
+function _shallowEqualObject<T extends string | number | symbol>(
+  objA: Record<T, unknown>,
+  objB: Record<T, unknown>,
+): boolean {
+  if (objA === objB) return true;
+
+  const keysA = Object.keys(objA) as T[];
+  const keysB = Object.keys(objB) as T[];
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (const key of keysA) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, key) ||
+      objA[key] !== objB[key]
+    )
+      return false;
+  }
+  return true;
 }

src/@lib/hocs/memo.ts

@@ -1,10 +1,24 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { shallowEquals } from "../equalities";
-import { ComponentType } from "react";
+import { ComponentType, createElement, ReactElement } from "react";
+import { useRef } from "../hooks";
 
 export function memo<P extends object>(
   Component: ComponentType<P>,
   _equals = shallowEquals,
 ) {
-  return Component;
+  const MemoizedComponent = (props: P) => {
+    const prevPropRef = useRef<P | null>(null);
+    const prevComponentRef = useRef<ReactElement<P> | null>(null);
+
+    const shouldUpdate =
+      prevPropRef.current === null || !_equals(prevPropRef.current, props);
+
+    prevPropRef.current = props;
+    if (shouldUpdate) {
+      prevComponentRef.current = createElement(Component, props);
+    }
+
+    return prevComponentRef.current;
+  };
+  return MemoizedComponent;
 }

src/@lib/hooks/index.ts

@@ -2,3 +2,5 @@ export * from "./useDeepMemo";
 export * from "./useMemo";
 export * from "./useCallback";
 export * from "./useRef";
+export * from "./useContext";
+export * from "./useInfiniteScroll";

src/@lib/hooks/useCallback.ts

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

src/@lib/hooks/useContext.ts

@@ -0,0 +1,40 @@
+import { createContext, useContext } from "react";
+import {
+  NotificationContextType,
+  ThemeContextType,
+  UserContextType,
+} from "../types";
+
+export const UserContext = createContext<UserContextType | undefined>(
+  undefined,
+);
+export const NotificationContext = createContext<
+  NotificationContextType | undefined
+>(undefined);
+export const ThemeContext = createContext<ThemeContextType | undefined>(
+  undefined,
+);
+
+export const useUserContext = () => {
+  const context = useContext(UserContext);
+  if (context === undefined) {
+    throw new Error("useAppContext must be used within an AppProvider");
+  }
+  return context;
+};
+
+export const useNotificationContext = () => {
+  const context = useContext(NotificationContext);
+  if (context === undefined) {
+    throw new Error("useAppContext must be used within an AppProvider");
+  }
+  return context;
+};
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useAppContext must be used within an AppProvider");
+  }
+  return context;
+};

src/@lib/hooks/useDeepMemo.ts

@@ -4,6 +4,5 @@ import { useMemo } from "./useMemo";
 import { deepEquals } from "../equalities";
 
 export function useDeepMemo<T>(factory: () => T, deps: DependencyList): T {
-  // 직접 작성한 useMemo를 참고해서 만들어보세요.
   return useMemo(factory, deps, deepEquals);
 }