[11팀 박근백] [Chapter 1-3] React, Beyond the Basics

.github/workflows/ci.yml

@@ -85,3 +85,4 @@ jobs:
         run: |
           npm install
           npm run test:advanced
+

.github/workflows/ci2.yml

@@ -0,0 +1,34 @@
+name: External Test
+
+on:
+  pull_request:
+    types:
+      - synchronize
+      - opened
+      - reopened
+
+  workflow_dispatch:
+
+jobs:
+  external:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: external-test
+        run: |
+          npm install
+          npm run test:external
+  enhanced:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: enhanced-test
+        run: |
+          npm install
+          npm run test:enhanced

package.json

@@ -14,13 +14,22 @@
     "test": "vitest",
     "test:basic": "vitest basic",
     "test:advanced": "vitest advanced",
+    "test:enhanced": "vitest enhanced",
+    "test:external": "vitest externalStore",
     "test:ui": "vitest --ui",
     "prepare": "husky"
   },
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "bash -c 'tsc --noEmit'",
+      "prettier --write",
+      "eslint --fix"
+    ]
+  },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@playwright/test": "^1.49.1",
@@ -32,10 +41,10 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^2.1.2",
     "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",
@@ -46,4 +55,4 @@
     "vite": "^5.4.1",
     "vitest": "^2.1.2"
   }
-}
+}

src/@lib/equalities/deepEquals.ts

@@ -1,3 +1,33 @@
 export function deepEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
+  // 원시타입의 값이 동일하거나 기존 객체의 주소값이 바뀌지 않은 경우
+  if (objA === objB) {
+    return true;
+  }
+
+  // null인 경우
+  if (objA === null || objB === null) {
+    return objA === objB;
+  }
+
+  // 나머지 원시값들 처리
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+
+  const objAKeys = Object.keys(objA);
+  const objBKeys = Object.keys(objB);
+
+  if (objAKeys.length !== objBKeys.length) {
+    return false;
+  }
+
+  for (const key of objAKeys) {
+    const valueA = Reflect.get(objA, key);
+    const valueB = Reflect.get(objB, key);
+    if (!deepEquals(valueA, valueB)) {
+      return false;
+    }
+  }
+
+  return true;
 }

src/@lib/equalities/shallowEquals.ts

@@ -1,3 +1,33 @@
 export function shallowEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
+  // 원시타입의 값이 동일하거나 기존 객체의 주소값이 바뀌지 않은 경우
+  if (objA === objB) {
+    return true;
+  }
+
+  // null인 경우
+  if (objA === null || objB === null) {
+    return objA === objB;
+  }
+
+  // 나머지 원시값들 처리
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+
+  const objAKeys = Object.keys(objA);
+  const objBKeys = Object.keys(objB);
+
+  if (objAKeys.length !== objBKeys.length) {
+    return false;
+  }
+
+  for (const key of objAKeys) {
+    const valueA = Reflect.get(objA, key);
+    const valueB = Reflect.get(objB, key);
+    if (valueA !== valueB) {
+      return false;
+    }
+  }
+
+  return true;
 }

src/@lib/hocs/memo.ts

@@ -1,10 +1,17 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { shallowEquals } from "../equalities";
-import { ComponentType } from "react";
+import React, { ComponentType, ReactNode } from "react";
 
 export function memo<P extends object>(
   Component: ComponentType<P>,
   _equals = shallowEquals,
 ) {
-  return Component;
+  let memoizedComponent: ReactNode | null = null;
+  let memoizedProps: P | null = null;
+  return (props: P) => {
+    if (!_equals(memoizedProps, props)) {
+      memoizedProps = props;
+      memoizedComponent = React.createElement(Component, props);
+    }
+    return memoizedComponent;
+  };
 }

src/@lib/hooks/index.ts

@@ -2,3 +2,4 @@ export * from "./useDeepMemo";
 export * from "./useMemo";
 export * from "./useCallback";
 export * from "./useRef";
+export * from "./useStore";

src/@lib/hooks/useCallback.ts

@@ -1,10 +1,12 @@
-/* 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";
 
 export function useCallback<T extends Function>(
   factory: T,
   _deps: DependencyList,
 ) {
-  // 직접 작성한 useMemo를 통해서 만들어보세요.
-  return factory as T;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const memoizedCallback = useMemo(() => factory, _deps);
+  return memoizedCallback;
 }

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);
 }

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";
 
 export function useMemo<T>(
   factory: () => T,
   _deps: DependencyList,
   _equals = shallowEquals,
 ): T {
-  // 직접 작성한 useRef를 통해서 만들어보세요.
-  return factory();
+  const valueRef = useRef<T | null>(null);
+  const depsRef = useRef(_deps);
+
+  if (valueRef.current === null || !_equals(depsRef.current, _deps)) {
+    valueRef.current = factory();
+    depsRef.current = _deps;
+  }
+
+  return valueRef.current;
 }

src/@lib/hooks/useRef.ts

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

src/@lib/hooks/useStore.ts

@@ -0,0 +1,16 @@
+import { useRef } from "./useRef";
+import { useSyncExternalStore } from "react";
+import { shallowEquals } from "../equalities";
+import { Store } from "../../storeUtils";
+
+export const useStore = <T, S>(store: Store<T>, selector: (store: T) => S) => {
+  const prevRef = useRef<S | null>(null);
+
+  return useSyncExternalStore(store.subscribe, () => {
+    const next = selector(store.getState());
+    if (prevRef.current === null || !shallowEquals(prevRef.current!, next)) {
+      prevRef.current = next;
+    }
+    return prevRef.current;
+  });
+};