[9팀 박상수] Chapter 1-3. React, Beyond the Basics

packages/app/package.json

@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && cp ./dist/index.html ./dist/404.html",
+    "build": "vite build && copy .\\dist\\index.html .\\dist\\404.html",
     "tsc": "tsc --noEmit",
     "lint:fix": "eslint --fix",
     "prettier:write": "prettier --write ./src",

packages/app/src/components/toast/ToastProvider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, memo, type PropsWithChildren, useContext, useReducer } from "react";
+import { createContext, memo, type PropsWithChildren, useContext, useReducer, useMemo, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { Toast } from "./Toast";
 import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
@@ -9,44 +9,65 @@ type ShowToast = (message: string, type: ToastType) => void;
 type Hide = () => void;
 
 const ToastContext = createContext<{
-  message: string;
-  type: ToastType;
   show: ShowToast;
   hide: Hide;
 }>({
-  ...initialState,
   show: () => null,
   hide: () => null,
 });
 
+const ToastStateContext = createContext<{
+  message: string;
+  type: ToastType;
+}>({
+  ...initialState,
+});
+
 const DEFAULT_DELAY = 3000;
 
-const useToastContext = () => useContext(ToastContext);
-export const useToastCommand = () => {
-  const { show, hide } = useToastContext();
-  return { show, hide };
-};
-export const useToastState = () => {
-  const { message, type } = useToastContext();
-  return { message, type };
-};
+export const useToastCommand = () => useContext(ToastContext);
+export const useToastState = () => useContext(ToastStateContext);
 
 export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const [state, dispatch] = useReducer(toastReducer, initialState);
-  const { show, hide } = createActions(dispatch);
+  const { show, hide } = useMemo(() => createActions(dispatch), [dispatch]);
   const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
+
+  const showWithHide: ShowToast = useCallback(
+    (...args) => {
+      show(...args);
+      hideAfter();
+    },
+    [show, hideAfter],
+  );
 
-  const showWithHide: ShowToast = (...args) => {
-    show(...args);
-    hideAfter();
-  };
+  const commandContextValue = useMemo(
+    () => ({
+      show: showWithHide,
+      hide,
+    }),
+    [showWithHide, hide],
+  );
+
+  const stateContextValue = useMemo(
+    () => ({
+      message: state.message,
+      type: state.type,
+    }),
+    [state.message, state.type],
+  );
 
   return (
-    <ToastContext value={{ show: showWithHide, hide, ...state }}>
-      {children}
-      {visible && createPortal(<Toast />, document.body)}
-    </ToastContext>
+    <ToastContext.Provider value={commandContextValue}>
+      <ToastStateContext.Provider value={stateContextValue}>
+        {children}
+        {visible && createPortal(<MemoizedToast />, document.body)}
+      </ToastStateContext.Provider>
+    </ToastContext.Provider>
   );
 });
+
+// Toast는 외부 상태 변화와 무관하게 고정되도록 메모이제이션
+const MemoizedToast = memo(Toast);

packages/lib/src/createObserver.ts

@@ -6,6 +6,10 @@ export const createObserver = () => {
   // useSyncExternalStore 에서 활용할 수 있도록 subscribe 함수를 수정합니다.
   const subscribe = (fn: Listener) => {
     listeners.add(fn);
+
+    return () => {
+      listeners.delete(fn); // 나중에 구독 해제 가능
+    };
   };
 
   const unsubscribe = (fn: Listener) => {
@@ -14,5 +18,5 @@ export const createObserver = () => {
 
   const notify = () => listeners.forEach((listener) => listener());
 
-  return { subscribe, notify };
+  return { subscribe, unsubscribe, notify };
 };

packages/lib/src/equals/deepEquals.ts

@@ -1,3 +1,28 @@
-export const deepEquals = (a: unknown, b: unknown) => {
-  return a === b;
+export const deepEquals = (a: unknown, b: unknown): boolean => {
+  if (a === b) return true;
+
+  // null 검사 + 타입 비교
+  if (typeof a !== typeof b || a === null || b === null) return false;
+
+  // 배열 비교
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every((val, i) => deepEquals(val, b[i])); // 재귀 (DFS)
+  }
+
+  // 객체 비교
+  if (typeof a === "object" && typeof b === "object") {
+    const aObj = a as Record<string, unknown>;
+    const bObj = b as Record<string, unknown>;
+    const aKeys = Object.keys(aObj);
+    const bKeys = Object.keys(bObj);
+    if (aKeys.length !== bKeys.length) return false;
+
+    return aKeys.every(
+      (key) => Object.prototype.hasOwnProperty.call(bObj, key) && deepEquals(aObj[key], bObj[key]), // 재귀 (DFS)
+    );
+  }
+
+  // 그 외 값은 ===
+  return false;
 };

packages/lib/src/equals/shallowEquals.ts

@@ -1,3 +1,19 @@
 export const shallowEquals = (a: unknown, b: unknown) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+
+    return a.every((val, index) => val === b[index]);
+  }
+
+  if (typeof a === "object" && typeof b === "object" && a !== null && b !== null) {
+    const aObj = a as Record<string, unknown>;
+    const bObj = b as Record<string, unknown>;
+    const aKeys = Object.keys(aObj);
+    const bKeys = Object.keys(bObj);
+
+    if (aKeys.length !== bKeys.length) return false;
+
+    return aKeys.every((key) => Object.prototype.hasOwnProperty.call(bObj, key) && aObj[key] === bObj[key]);
+  }
   return a === b;
 };

packages/lib/src/hocs/deepMemo.ts

@@ -1,5 +1,6 @@
-import type { FunctionComponent } from "react";
+import { type FunctionComponent, memo as reactMemo } from "react";
+import { deepEquals } from "../equals";
 
 export function deepMemo<P extends object>(Component: FunctionComponent<P>) {
-  return Component;
+  return reactMemo(Component, deepEquals);
 }

packages/lib/src/hocs/memo.ts

@@ -1,6 +1,6 @@
-import { type FunctionComponent } from "react";
+import { type FunctionComponent, memo as reactMemo } from "react";
 import { shallowEquals } from "../equals";
 
 export function memo<P extends object>(Component: FunctionComponent<P>, equals = shallowEquals) {
-  return Component;
+  return reactMemo(Component, equals);
 }

packages/lib/src/hooks/useAutoCallback.ts

@@ -3,5 +3,18 @@ import { useCallback } from "./useCallback";
 import { useRef } from "./useRef";
 
 export const useAutoCallback = <T extends AnyFunction>(fn: T): T => {
-  return fn;
+  const ref = useRef(fn);
+
+  // 매 렌더마다 최신 함수로 갱신
+  ref.current = fn;
+
+  // 참조는 고정되지만, 내부 로직은 항상 최신
+  const stableCallback = useCallback(
+    ((...args: unknown[]) => {
+      return ref.current(...args);
+    }) as T,
+    [],
+  );
+
+  return stableCallback;
 };

packages/lib/src/hooks/useCallback.ts

@@ -1,7 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-unsafe-function-type */
 import type { DependencyList } from "react";
+import { useMemo } from "./useMemo"; // ✅ 직접 만든 useMemo 사용
 
-export function useCallback<T extends Function>(factory: T, _deps: DependencyList) {
-  // 직접 작성한 useMemo를 통해서 만들어보세요.
-  return factory as T;
+export function useCallback<T>(factory: T, _deps: DependencyList): T {
+  // ✅ useMemo를 이용해 메모이제이션된 콜백 함수 반환
+  return useMemo(() => factory, _deps);
 }

packages/lib/src/hooks/useMemo.ts

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

packages/lib/src/hooks/useRef.ts

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

packages/lib/src/hooks/useRouter.ts

@@ -8,5 +8,12 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 export const useRouter = <T extends RouterInstance<AnyFunction>, S>(router: T, selector = defaultSelector<T, S>) => {
   // useSyncExternalStore를 사용하여 router의 상태를 구독하고 가져오는 훅을 구현합니다.
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(router);
+  return useSyncExternalStore(router.subscribe, () => {
+    const selected = shallowSelector(router);
+    // shallowSelector가 null을 반환할 수 있으므로, fallback 처리
+    if (selected === null) {
+      return selector(router);
+    }
+    return selected;
+  }) as S;
 };

packages/lib/src/hooks/useShallowSelector.ts

@@ -4,6 +4,11 @@ import { shallowEquals } from "../equals";
 type Selector<T, S = T> = (state: T) => S;
 
 export const useShallowSelector = <T, S = T>(selector: Selector<T, S>) => {
+  const prev = useRef<S | null>(null);
   // 이전 상태를 저장하고, shallowEquals를 사용하여 상태가 변경되었는지 확인하는 훅을 구현합니다.
-  return (state: T): S => selector(state);
+
+  return (state: T) => {
+    const next = selector(state);
+    return shallowEquals(prev.current, next) ? prev.current : (prev.current = next);
+  };
 };

packages/lib/src/hooks/useShallowState.ts

@@ -1,7 +1,18 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { shallowEquals } from "../equals";
 
-export const useShallowState = <T>(initialValue: Parameters<typeof useState<T>>[0]) => {
-  // useState를 사용하여 상태를 관리하고, shallowEquals를 사용하여 상태 변경을 감지하는 훅을 구현합니다.
-  return useState(initialValue);
+export const useShallowState = <T>(initialValue: T): [T, (next: T) => void] => {
+  const [state, setState] = useState(initialValue);
+
+  // ✅ 항상 같은 함수를 반환해야 하므로 useCallback
+  const setShallow = useCallback((next: T) => {
+    setState((prev) => {
+      if (shallowEquals(prev, next)) {
+        return prev; // 동일하므로 상태 변경 없이 리렌더 방지
+      }
+      return next; // shallow하지 않으면 상태 변경
+    });
+  }, []);
+
+  return [state, setShallow];
 };

packages/lib/src/hooks/useStorage.ts

@@ -5,5 +5,8 @@ type Storage<T> = ReturnType<typeof createStorage<T>>;
 
 export const useStorage = <T>(storage: Storage<T>) => {
   // useSyncExternalStore를 사용해서 storage의 상태를 구독하고 가져오는 훅을 구현해보세요.
-  return storage.get();
+  return useSyncExternalStore(
+    storage.subscribe, // 상태가 바뀌면 리렌더링할 수 있도록
+    storage.get, // 현재 스냅샷을 가져옴
+  );
 };

packages/lib/src/hooks/useStore.ts

@@ -1,13 +1,21 @@
-import type { createStore } from "../createStore";
 import { useSyncExternalStore } from "react";
+import type { createStore } from "../createStore";
 import { useShallowSelector } from "./useShallowSelector";
 
 type Store<T> = ReturnType<typeof createStore<T>>;
 
 const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
-export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>) => {
-  // useSyncExternalStore와 useShallowSelector를 사용해서 store의 상태를 구독하고 가져오는 훅을 구현해보세요.
+export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>): S => {
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(store.getState());
+
+  // shallowSelector가 null을 반환할 수 있으므로, null일 경우 store의 현재 상태를 selector로 변환하여 반환
+  return useSyncExternalStore(store.subscribe, () => {
+    const selected = shallowSelector(store.getState());
+    // shallowSelector가 null을 반환할 수 있으므로, fallback 처리
+    if (selected === null) {
+      return selector(store.getState());
+    }
+    return selected;
+  }) as S;
 };