[7팀 김주광] [Chapter 1-3] React, Beyond the Basics

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": false
+}

package.json

@@ -17,17 +17,18 @@
     "test:ui": "vitest --ui",
     "prepare": "husky"
   },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "tsc --noEmit",
       "prettier --write",
       "eslint --fix"
     ]
   },
+  "dependencies": {
+    "@types/node": "^22.10.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@playwright/test": "^1.49.1",
@@ -39,10 +40,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",

src/@lib/equalities/deepEquals.ts

@@ -1,3 +1,22 @@
+//    - 재귀적으로 각 속성에 대해 deepEquals 호출
 export function deepEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
+  if (objA === objB) {
+    return true;
+  }
+  // 2. 둘 다 객체인 경우:
+  //    - 배열인지 확인
+  if (Array.isArray(objA) && Array.isArray(objB)) {
+    return objA.every((v, i) => deepEquals(v, objB[i]));
+  }
+
+  //    - 객체의 키 개수가 다른 경우 처리
+  if (
+    typeof objA === "object" &&
+    typeof objB === "object" &&
+    Object.keys(objA).length === Object.keys(objB).length
+  ) {
+    return Object.keys(objA).every((key) => deepEquals(objA[key], objB[key]));
+  }
+
+  return false;
 }

src/@lib/equalities/shallowEquals.ts

@@ -1,3 +1,32 @@
 export function shallowEquals<T>(objA: T, objB: T): boolean {
-  return objA === objB;
+  // 1. 두 값이 정확히 같은지 확인 (참조가 같은 경우)
+  if (objA === objB) {
+    return true;
+  }
+
+  // 2. 둘 중 하나라도 객체가 아닌 경우 처리
+  if (
+    typeof objA !== "object" ||
+    objA === null ||
+    typeof objB !== "object" ||
+    objB === null
+  ) {
+    return false;
+  }
+
+  // 3. 키 개수 비교
+  const keys1 = Object.keys(objA);
+  const keys2 = Object.keys(objB);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  // 4. 모든 키에 대해 얕은 비교
+  for (const key of keys1) {
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+
+  return true;
 }

src/@lib/hocs/memo.ts

@@ -1,10 +1,32 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { shallowEquals } from "../equalities";
-import { ComponentType } from "react";
+import { ComponentType, createElement } from "react";
+import { useRef } from "../hooks";
 
+/**
+ * memo HOC는 컴포넌트의 props를 얕은 비교하여 불필요한 리렌더링을 방지합니다.
+ * HOC 란?
+ * Higher-Order Component
+ * 기본 컴포넌트에 기능 추가하여 업그레이드된 컴포넌트를 만들수 있다.
+ */
 export function memo<P extends object>(
   Component: ComponentType<P>,
-  _equals = shallowEquals,
+  equals = shallowEquals,
 ) {
-  return Component;
+  // 2. 메모이제이션된 컴포넌트 생성
+  const MemoizedComponent = (props: P) => {
+    // 1. 이전 props를 저장할 ref 생성
+    const propsRef = useRef<P | null>(null);
+    const componentRef = useRef<React.ReactElement | null>(null);
+
+    // 3. equals 함수를 사용하여 props 비교
+    if (propsRef.current === null || !equals(props, propsRef.current)) {
+      propsRef.current = props;
+      // 4. props가 변경된 경우에만 새로운 렌더링 수행
+      componentRef.current = createElement(Component, props);
+    }
+
+    return componentRef.current;
+  };
+
+  return MemoizedComponent;
 }

src/@lib/hooks/useCallback.ts

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars,@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;
+
+  return useMemo(() => factory, _deps);
 }

src/@lib/hooks/useMemo.ts

@@ -1,12 +1,26 @@
 /* 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();
+  // memo 초기값 설정
+  const ref = useRef<{
+    deps: DependencyList;
+    value: T;
+    initialized: boolean;
+  }>({ deps: [], value: undefined as T, initialized: false });
+
+  //memo 의존성 검사
+  if (!ref.current.initialized || !_equals(_deps, ref.current.deps)) {
+    ref.current.deps = _deps;
+    ref.current.value = factory();
+    ref.current.initialized = true;
+  }
+  return ref.current.value;
 }

src/@lib/hooks/useRef.ts

@@ -1,4 +1,11 @@
+import { useState } from "react";
+
 export function useRef<T>(initialValue: T): { current: T } {
   // React의 useState를 이용해서 만들어보세요.
-  return { current: initialValue };
+  const [ref] = useState<{ current: T }>({ current: initialValue });
+  /**
+   * ref.current를 통해 값이 변경이 가능한 이유
+   * ref(참조값)은 그대로 두고 .current (속성)을 변경하는 것이라 가능
+   */
+  return ref;
 }