hanghae-plus · k-sang-soo · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -18,6 +18,7 @@
       }
     };
   </script>
+
 </head>
 <body class="bg-gray-50">
 <div id="root"></div>

diff --git a/packages/app/src/components/toast/ToastProvider.tsx b/packages/app/src/components/toast/ToastProvider.tsx
@@ -1,52 +1,77 @@
-/* eslint-disable react-refresh/only-export-components */
 import { createContext, memo, type PropsWithChildren, useContext, useReducer } from "react";
 import { createPortal } from "react-dom";
 import { Toast } from "./Toast";
-import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
+import { initialState, toastReducer, type ToastType, useToastActions } from "./toastReducer";
 import { debounce } from "../../utils";
+import { useAutoCallback } from "@hanghae-plus/lib";
+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;
+// toast command를 관리하는 context
+const ToastCommandContext = createContext<{
   show: ShowToast;
   hide: Hide;
 }>({
-  ...initialState,
   show: () => null,
   hide: () => null,
 });
 
+// toast state를 관리하는 context
+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 };
-};
+// context를 사용하는 함수
+export const useToastCommand = () => useContext(ToastCommandContext);
+export const useToastState = () => useContext(ToastStateContext);
 
 export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const [state, dispatch] = useReducer(toastReducer, initialState);
-  const { show, hide } = createActions(dispatch);
   const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  // action을 생성
+  const { show, hide } = useToastActions(dispatch);
 
-  const showWithHide: ShowToast = (...args) => {
+  // hide 함수를 3초 후에 호출
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
+
+  // show 함수에 hideAfter 함수를 추가
+  const showWithHide: ShowToast = useAutoCallback((...args) => {
     show(...args);
     hideAfter();
-  };
+  });
+
+  // Command context value를 메모이제이션
+  const commandValue = useMemo(
+    () => ({
+      show: showWithHide,
+      hide,
+    }),
+    [showWithHide, hide],
+  );
+
+  // State context value를 메모이제이션
+  const stateValue = 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>
+    <ToastCommandContext.Provider value={commandValue}>
+      <ToastStateContext.Provider value={stateValue}>
+        {children}
+        {visible && createPortal(<Toast />, document.body)}
+      </ToastStateContext.Provider>
+    </ToastCommandContext.Provider>
   );
 });
diff --git a/packages/app/src/components/toast/toastReducer.ts b/packages/app/src/components/toast/toastReducer.ts
@@ -1,4 +1,5 @@
-import type { ActionDispatch } from "react";
+import { type ActionDispatch } from "react";
+import { useCallback, useMemo } from "@hanghae-plus/lib/src/hooks";
 
 export type ToastType = "info" | "success" | "warning" | "error";
 
@@ -33,7 +34,13 @@ export const toastReducer = (state: ToastState, action: any): ToastState => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const createActions = (dispatch: ActionDispatch<[action: any]>) => ({
-  show: (message: string, type: ToastType) => dispatch({ type: Actions.SHOW, payload: { message, type } }),
-  hide: () => dispatch({ type: Actions.HIDE }),
-});
+export const useToastActions = (dispatch: ActionDispatch<[action: any]>) => {
+  const show = useCallback(
+    (message: string, type: ToastType) => dispatch({ type: Actions.SHOW, payload: { message, type } }),
+    [dispatch],
+  );
+
+  const hide = useCallback(() => dispatch({ type: Actions.HIDE }), [dispatch]);
+
+  return useMemo(() => ({ show, hide }), [show, hide]);
+};
diff --git a/packages/lib/src/createObserver.ts b/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) => {

diff --git a/packages/lib/src/equals/deepEquals.ts b/packages/lib/src/equals/deepEquals.ts
@@ -1,3 +1,30 @@
+import { typeUtils } from "../utils/typeUtil.ts";
+import { deepEqualsArrays } from "./deepEqualsArrays.ts";
+import deepEqualsObjects from "./deepEqualsObjects.ts";
+
 export const deepEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  // 원시 타입인 경우
+  if (typeUtils.isPrimitive(a) || typeUtils.isPrimitive(b)) {
+    return a === b;
+  }
+
+  const aIsArray = Array.isArray(a);
+  const bIsArray = Array.isArray(b);
+
+  // 비교하려는 값의 타입이 다르면 false
+  if (aIsArray !== bIsArray) {
+    return false;
+  }
+
+  // 배열인 경우
+  if (aIsArray && bIsArray) {
+    return deepEqualsArrays(a, b);
+  }
+
+  // 객체인 경우
+  if (typeUtils.isObject(a) && typeUtils.isObject(b)) {
+    return deepEqualsObjects(a, b);
+  }
+
+  return true;
 };
diff --git a/packages/lib/src/equals/deepEqualsArrays.ts b/packages/lib/src/equals/deepEqualsArrays.ts
@@ -0,0 +1,32 @@
+import { deepEquals } from "./deepEquals.ts";
+
+type ArrayValue = unknown[];
+
+export const deepEqualsArrays = (arrayA: ArrayValue, arrayB: ArrayValue) => {
+  // 참조가 같으면 true
+  if (arrayA === arrayB) {
+    return true;
+  }
+
+  // 둘 중 하나라도 null 또는 undefined면 false
+  if (!arrayA || !arrayB) {
+    return false;
+  }
+
+  const arrayALength = arrayA.length;
+  const arrayBLength = arrayB.length;
+
+  // 길이가 다르면 false
+  if (arrayALength !== arrayBLength) {
+    return false;
+  }
+
+  for (let i = 0; i < arrayALength; i++) {
+    // 각 요소를 재귀적으로 비교
+    if (!deepEquals(arrayA[i], arrayB[i])) {
+      return false;
+    }
+  }
+
+  return true;
+};
diff --git a/packages/lib/src/equals/deepEqualsObjects.ts b/packages/lib/src/equals/deepEqualsObjects.ts
@@ -0,0 +1,41 @@
+import { deepEquals } from "./deepEquals.ts";
+
+type ObjectValue = Record<string, unknown>;
+
+export default function deepEqualsObjects(objectA: ObjectValue, objectB: ObjectValue): boolean {
+  // 참조가 같으면 true
+  if (objectA === objectB) {
+    return true;
+  }
+
+  // 둘 중 하나라도 null 또는 undefined면 false
+  if (!objectA || !objectB) {
+    return false;
+  }
+
+  const objectAKeys = Object.keys(objectA);
+  const objectBKeys = Object.keys(objectB);
+  const objectALength = objectAKeys.length;
+  const objectBLength = objectBKeys.length;
+
+  // 키가 개수가 다르면 false
+  if (objectALength !== objectBLength) {
+    return false;
+  }
+
+  for (let i = 0; i < objectALength; i++) {
+    const key = objectAKeys[i];
+
+    // B에 해당 key가 없으면 다름
+    if (!Object.hasOwn(objectB, key)) {
+      return false;
+    }
+
+    // 각 요소를 재귀적으로 비교
+    if (!deepEquals(objectA[key], objectB[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/lib/src/equals/shallowEquals.ts b/packages/lib/src/equals/shallowEquals.ts
@@ -1,3 +1,28 @@
+import shallowEqualsArrays from "./shallowEqualsArrays.ts";
+import shallowEqualsObjects from "./shallowEqualsObjects.ts";
+import { typeUtils } from "../utils/typeUtil.ts";
+
 export const shallowEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  // 원시 타입인 경우
+  if (typeUtils.isPrimitive(a) || typeUtils.isPrimitive(b)) {
+    return a === b;
+  }
+
+  const aIsArray = Array.isArray(a);
+  const bIsArray = Array.isArray(b);
+
+  // 비교하려는 값의 타입이 다르면 false
+  if (aIsArray !== bIsArray) {
+    return false;
+  }
+
+  // 배열인 경우
+  if (aIsArray && bIsArray) {
+    return shallowEqualsArrays(a, b);
+  }
+
+  // 객체인 경우
+  if (typeUtils.isObject(a) && typeUtils.isObject(b)) {
+    return shallowEqualsObjects(a, b);
+  }
 };
diff --git a/packages/lib/src/equals/shallowEqualsArrays.ts b/packages/lib/src/equals/shallowEqualsArrays.ts
@@ -0,0 +1,30 @@
+type ArrayValue = unknown[];
+
+export default function shallowEqualsArrays(arrayA: ArrayValue, arrayB: ArrayValue) {
+  // 참조가 같으면 true
+  if (arrayA === arrayB) {
+    return true;
+  }
+
+  // 둘 중 하나라도 null 또는 undefined면 false
+  if (!arrayA || !arrayB) {
+    return false;
+  }
+
+  const arrayALength = arrayA.length;
+  const arrayBLength = arrayB.length;
+
+  // 길이가 다르면 false
+  if (arrayALength !== arrayBLength) {
+    return false;
+  }
+
+  for (let i = 0; i < arrayALength; i++) {
+    // 값이 다르면 false
+    if (arrayA[i] !== arrayB[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/lib/src/equals/shallowEqualsObjects.ts b/packages/lib/src/equals/shallowEqualsObjects.ts
@@ -0,0 +1,34 @@
+type ObjectValue = Record<string, unknown>;
+
+export default function shallowEqualsObjects(objectA: ObjectValue, objectB: ObjectValue): boolean {
+  // 참조가 같으면 true
+  if (objectA === objectB) {
+    return true;
+  }
+
+  // 둘 중 하나라도 null 또는 undefined면 false
+  if (!objectA || !objectB) {
+    return false;
+  }
+
+  const objectAKeys = Object.keys(objectA);
+  const objectBKeys = Object.keys(objectB);
+  const objectALength = objectAKeys.length;
+  const objectBLength = objectBKeys.length;
+
+  // 키가 개수가 다르면 false
+  if (objectALength !== objectBLength) {
+    return false;
+  }
+
+  for (let i = 0; i < objectALength; i++) {
+    const key = objectAKeys[i];
+
+    // 값이 다르거나, B에 해당 key가 없으면 다름
+    if (objectA[key] !== objectB[key] || !Object.hasOwn(objectB, key)) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/lib/src/hocs/deepMemo.ts b/packages/lib/src/hocs/deepMemo.ts
@@ -1,5 +1,7 @@
 import type { FunctionComponent } from "react";
+import { memo } from "./memo.ts";
+import { deepEquals } from "../equals";
 
 export function deepMemo<P extends object>(Component: FunctionComponent<P>) {
-  return Component;
+  return memo(Component, deepEquals);
 }
diff --git a/packages/lib/src/hocs/index.ts b/packages/lib/src/hocs/index.ts
@@ -1,2 +1,2 @@
 export * from "./deepMemo";
-export * from "./memo";
+export * from "./memo.ts";
diff --git a/packages/lib/src/hocs/memo.ts b/packages/lib/src/hocs/memo.ts
@@ -1,6 +1,27 @@
-import { type FunctionComponent } from "react";
+import type { FunctionComponent, ReactNode } 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 MemoizedComponent(props: P) {
+    const prevPropsRef = useRef<P | null>(null);
+    const prevComponentRef = useRef<ReactNode | Promise<ReactNode> | null>(null);
+
+    // 첫 렌더링이면, 이전 컴포넌트를 생성하고 반환한다.
+    if (!prevPropsRef.current) {
+      prevPropsRef.current = props;
+      prevComponentRef.current = Component({ ...props });
+      return prevComponentRef.current;
+    }
+
+    // props가 변경되지 않았다면, 이전 컴포넌트를 반환한다.
+    if (equals(prevPropsRef.current, props)) {
+      return prevComponentRef.current;
+    }
+
+    // props가 변경되었으므로, 이전 컴포넌트를 삭제하고 새로운 컴포넌트를 생성한다.
+    prevPropsRef.current = props;
+    prevComponentRef.current = Component({ ...props });
+    return prevComponentRef.current;
+  };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ @@
           }
         };
       </script>
     </head>
     <body class="bg-gray-50">
     <div id="root"></div>
@@ Expand Down @@