[9팀 임두현] Chapter 1-3. React, Beyond the Basics

.gitignore

@@ -25,3 +25,5 @@ dist-ssr
 /test-results/
 /playwright-report/
 /coverage/
+
+/docs

packages/app/src/components/modal/ModalProvider.tsx

@@ -16,12 +16,13 @@ export const useModalContext = () => useContext(ModalContext);
 export const ModalProvider = memo(({ children }: PropsWithChildren) => {
   const [content, setContent] = useState<ReactNode>(null);
 
-  const open = (newContent: ReactNode) => setContent(newContent);
-
-  const close = () => setContent(null);
+  const [actions] = useState(() => ({
+    open: (newContent: ReactNode) => setContent(newContent),
+    close: () => setContent(null),
+  }));
 
   return (
-    <ModalContext value={{ open, close }}>
+    <ModalContext value={actions}>
       {children}
       {content && createPortal(<Modal>{content}</Modal>, document.body)}
     </ModalContext>

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

@@ -1,33 +1,36 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, memo, type PropsWithChildren, useContext, useReducer } from "react";
+import { createContext, memo, type PropsWithChildren, useContext, useReducer, useState } from "react";
 import { createPortal } from "react-dom";
 import { Toast } from "./Toast";
 import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
 import { debounce } from "../../utils";
+import { useMemo } from "@hanghae-plus/lib/src/hooks";
 
 type ShowToast = (message: string, type: ToastType) => void;
 type Hide = () => void;
 
-const ToastContext = createContext<{
-  message: string;
-  type: ToastType;
+const ToastActionContext = createContext<{
   show: ShowToast;
   hide: Hide;
-}>({
-  ...initialState,
-  show: () => null,
-  hide: () => null,
-});
+}>({ show: () => null, hide: () => null });
+
+const ToastStateContext = createContext<{
+  message: string;
+  type: ToastType;
+}>({ ...initialState });
 
 const DEFAULT_DELAY = 3000;
 
-const useToastContext = () => useContext(ToastContext);
+const useActionToastContext = () => useContext(ToastActionContext);
+const useToastStateContext = () => useContext(ToastStateContext);
+
 export const useToastCommand = () => {
-  const { show, hide } = useToastContext();
+  const { show, hide } = useActionToastContext();
   return { show, hide };
 };
+
 export const useToastState = () => {
-  const { message, type } = useToastContext();
+  const { message, type } = useToastStateContext();
   return { message, type };
 };
 
@@ -36,17 +39,26 @@ export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const { show, hide } = createActions(dispatch);
   const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
 
   const showWithHide: ShowToast = (...args) => {
     show(...args);
     hideAfter();
   };
 
+  const stateValue = useMemo(() => ({ ...state }), [state]);
+
+  const [actions] = useState(() => ({
+    show: showWithHide,
+    hide,
+  }));
+
   return (
-    <ToastContext value={{ show: showWithHide, hide, ...state }}>
-      {children}
-      {visible && createPortal(<Toast />, document.body)}
-    </ToastContext>
+    <ToastStateContext value={stateValue}>
+      <ToastActionContext value={actions}>
+        {children}
+        {visible && createPortal(<Toast />, document.body)}
+      </ToastActionContext>
+    </ToastStateContext>
   );
 });

packages/lib/src/createObserver.ts

@@ -3,9 +3,9 @@ type Listener = () => void;
 export const createObserver = () => {
   const listeners = new Set<Listener>();
 
-  // useSyncExternalStore 에서 활용할 수 있도록 subscribe 함수를 수정합니다.
   const subscribe = (fn: Listener) => {
     listeners.add(fn);
+    return () => unsubscribe(fn);
   };
 
   const unsubscribe = (fn: Listener) => {

packages/lib/src/equals/deepEquals.ts

@@ -1,3 +1,18 @@
-export const deepEquals = (a: unknown, b: unknown) => {
-  return a === b;
-};
+export function deepEquals(objA: unknown, objB: unknown): boolean {
+  if (objA === objB) return true;
+
+  if (objA == null || objB == null || typeof objA !== "object" || typeof objB !== "object") return false;
+
+  const keysOfA = Object.keys(objA);
+  const keysOfB = Object.keys(objB);
+
+  if (keysOfA.length !== keysOfB.length) return false;
+
+  for (const key of keysOfA) {
+    const valueA = (objA as Record<string, unknown>)[key];
+    const valueB = (objB as Record<string, unknown>)[key];
+    if (!deepEquals(valueA, valueB)) return false;
+  }
+
+  return true;
+}

packages/lib/src/equals/shallowEquals.ts

@@ -1,3 +1,20 @@
-export const shallowEquals = (a: unknown, b: unknown) => {
-  return a === b;
-};
+export function shallowEquals(objA: unknown, objB: unknown): boolean {
+  if (objA === objB) return true;
+
+  if (objA == null || objB == null || typeof objA !== "object" || typeof objB !== "object") return false;
+
+  const keysOfA = Object.keys(objA);
+  const keysOfB = Object.keys(objB);
+
+  if (keysOfA.length !== keysOfB.length) return false;
+
+  for (const key of keysOfA) {
+    const valueA = (objA as Record<string, unknown>)[key];
+    const valueB = (objB as Record<string, unknown>)[key];
+    if (valueA !== valueB) {
+      return false;
+    }
+  }
+
+  return true;
+}

packages/lib/src/hocs/deepMemo.ts

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

packages/lib/src/hocs/memo.ts

@@ -1,6 +1,20 @@
-import { type FunctionComponent } from "react";
+import { createElement, type FunctionComponent, type ReactElement } from "react";
 import { shallowEquals } from "../equals";
+import { useRef } from "../hooks";
 
 export function memo<P extends object>(Component: FunctionComponent<P>, equals = shallowEquals) {
-  return Component;
+  return function MemorizedComponent(props: P) {
+    const propsRef = useRef<P | null>(null);
+    const componentRef = useRef<ReactElement | null>(null);
+
+    const isInitialRender = propsRef.current === null;
+    const propsChanged = !equals(propsRef.current, props);
+
+    if (isInitialRender || propsChanged) {
+      propsRef.current = props;
+      componentRef.current = createElement(Component, props);
+    }
+
+    return componentRef.current;
+  };
 }

packages/lib/src/hooks/useAutoCallback.ts

@@ -3,5 +3,12 @@ import { useCallback } from "./useCallback";
 import { useRef } from "./useRef";
 
 export const useAutoCallback = <T extends AnyFunction>(fn: T): T => {
-  return fn;
+  const fnRef = useRef<T>(fn);
+  fnRef.current = fn;
+
+  const memoizedCallback = useCallback((...args: Parameters<T>) => {
+    return fnRef.current(...args);
+  }, []);
+
+  return memoizedCallback as T;
 };

packages/lib/src/hooks/useCallback.ts

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

packages/lib/src/hooks/useMemo.ts

@@ -1,8 +1,21 @@
-/* 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();
+interface MemoCache<T> {
+  deps: DependencyList | undefined;
+  value: T;
+}
+
+export function useMemo<T>(factory: () => T, deps: DependencyList, equals = shallowEquals): T {
+  const ref = useRef<MemoCache<T> | null>(null);
+
+  if (ref.current?.deps && equals(ref.current.deps, deps)) return ref.current.value;
+
+  ref.current = {
+    deps: deps,
+    value: factory(),
+  };
+
+  return ref.current.value;
 }

packages/lib/src/hooks/useRef.ts

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

packages/lib/src/hooks/useRouter.ts

@@ -6,7 +6,8 @@ import { useShallowSelector } from "./useShallowSelector";
 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);
+  const snapshot = () => shallowSelector(router);
+
+  return useSyncExternalStore(router.subscribe, snapshot);
 };

packages/lib/src/hooks/useShallowSelector.ts

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

packages/lib/src/hooks/useShallowState.ts

@@ -1,7 +1,15 @@
-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)): [T, (newValue: T) => void] => {
+  const [state, setState] = useState<T>(initialValue);
+
+  const setShallowState = useCallback((newValue: T) => {
+    setState((currentValue) => {
+      if (shallowEquals(currentValue, newValue)) return currentValue;
+      else return newValue;
+    });
+  }, []);
+
+  return [state, setShallowState];
 };

packages/lib/src/hooks/useStorage.ts

@@ -4,6 +4,5 @@ import type { createStorage } from "../createStorage";
 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

@@ -7,7 +7,8 @@ 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의 상태를 구독하고 가져오는 훅을 구현해보세요.
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(store.getState());
+  const snapshot = () => shallowSelector(store.getState());
+
+  return useSyncExternalStore(store.subscribe, snapshot);
 };