From 62a639c67847784a0c17d929d5f1d9f3056d83fa Mon Sep 17 00:00:00 2001 From: Gyeongmin Kim Date: Fri, 3 Jan 2025 09:30:02 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A5=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/pre-commit | 2 +- eslint.config.js | 2 +- src/@lib/equalities/shallowEquals.ts | 15 ++++-------- src/@lib/hooks/useCallback.ts | 4 ++-- src/components/ItemList.tsx | 8 +++---- src/context/ItemContext.tsx | 34 ---------------------------- src/context/NotificationContext.tsx | 6 ++--- src/context/ThemeContext.tsx | 2 +- src/context/UserContext.tsx | 2 +- src/main.tsx | 2 +- 10 files changed, 18 insertions(+), 59 deletions(-) delete mode 100644 src/context/ItemContext.tsx diff --git a/.husky/pre-commit b/.husky/pre-commit index 6920e3af..7a0f6418 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1 +1 @@ -npx lint-stagedx \ No newline at end of file +npm run tsc && npm run prettier:write && npm run lint:fix \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js index 7142eabd..ce12dba3 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -40,5 +40,5 @@ export default tseslint.config( }, ], }, - } + }, ); diff --git a/src/@lib/equalities/shallowEquals.ts b/src/@lib/equalities/shallowEquals.ts index 848d2a4d..762da3f0 100644 --- a/src/@lib/equalities/shallowEquals.ts +++ b/src/@lib/equalities/shallowEquals.ts @@ -5,16 +5,12 @@ export function shallowEquals(objA: T, objB: T): boolean { return true; } - // 2. 둘 중 하나라도 객체가 아닌 경우 처리 - if ( - typeof objA !== "object" || - objA === null || - typeof objB !== "object" || - objB === null - ) { + // 2. 타입 체크 - null도 함께 처리 + // (typeof null === "object"이지만, null은 falsy value이므로 + // 조건문에서 false로 평가됩니다) + if (!objA || !objB || typeof objA !== "object" || typeof objB !== "object") { return false; } - // 3. 객체의 키 개수가 다른 경우 처리 const keysA = Object.keys(objA); const keysB = Object.keys(objB); @@ -24,8 +20,7 @@ export function shallowEquals(objA: T, objB: T): boolean { // 4. 모든 키에 대해 얕은 비교 수행 for (const key of keysA) { - // Q. hasOwn에 에러가 발생합니다. 어떻게 수정해야 좋을까요? - if (!Object.hasOwn(objB, key) || objA[key] !== objB[key]) { + if (objA[key as keyof T] !== objB[key as keyof T]) { return false; } } diff --git a/src/@lib/hooks/useCallback.ts b/src/@lib/hooks/useCallback.ts index 6e12d01d..64b99db4 100644 --- a/src/@lib/hooks/useCallback.ts +++ b/src/@lib/hooks/useCallback.ts @@ -6,8 +6,8 @@ import { shallowEquals } from "../equalities"; export function useCallback( callback: T, deps: DependencyList, - _equals = shallowEquals, + equals = shallowEquals ): T { // useMemo를 사용하여 의존성이 변경될 때만 새로운 함수를 생성 - return useMemo(() => callback, deps, _equals); + return useMemo(() => callback, deps, equals); } diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx index 47441f85..e22172c7 100644 --- a/src/components/ItemList.tsx +++ b/src/components/ItemList.tsx @@ -8,10 +8,8 @@ export const ItemList: React.FC = () => { const [filter, setFilter] = useState(""); const { theme } = useTheme(); - // () => generateItems(1000): 왜 이렇게하면 괜찮을까? - // 화살표 함수를 했을 때는 첫 렌더링 시에만 - // generateItems, 컴포넌트가 리렌더링 될때마다 호출하게 된다 - // gus + // () => generateItems(1000): 화살표 함수를 했을 때는 첫 렌더링 시에만 + // generateItems, 컴포넌트가 리렌더링될때마다 호출하게 된다 const [items, setItems] = useState(() => generateItems(1000)); const addItems = useCallback(() => { @@ -24,7 +22,7 @@ export const ItemList: React.FC = () => { const filteredItems = items.filter( (item) => item.name.toLowerCase().includes(filter.toLowerCase()) || - item.category.toLowerCase().includes(filter.toLowerCase()) + item.category.toLowerCase().includes(filter.toLowerCase()), ); const totalPrice = filteredItems.reduce((sum, item) => sum + item.price, 0); diff --git a/src/context/ItemContext.tsx b/src/context/ItemContext.tsx deleted file mode 100644 index e917a500..00000000 --- a/src/context/ItemContext.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { - createContext, - useCallback, - useContext, - useMemo, - useState, -} from "react"; -import { Item } from "../types"; -import { generateItems } from "../utils"; - -// 1. type -interface ItemContextType { - items: Item[]; - addItems: () => void; -} - -interface PropsWithChildren { - children: React.ReactNode; -} - -// 2. context -const ItemContext = createContext(null); - -// 3. provider -export const ItemContextProvider = ({ children }: PropsWithChildren) => { - return {children}; -}; - -// 4. hook -export const useItems = () => { - const context = useContext(ItemContext); - if (!context) throw new Error("useItems must be used within a ItemProvider"); - return context; -}; diff --git a/src/context/NotificationContext.tsx b/src/context/NotificationContext.tsx index c8386f4e..b20f2ac8 100644 --- a/src/context/NotificationContext.tsx +++ b/src/context/NotificationContext.tsx @@ -33,7 +33,7 @@ export const NotificationContextProvider = ({ const removeNotification = useCallback((id: number) => { setNotifications((prev) => - prev.filter((notification) => notification.id !== id) + prev.filter((notification) => notification.id !== id), ); }, []); @@ -43,7 +43,7 @@ export const NotificationContextProvider = ({ addNotification, removeNotification, }), - [notifications, addNotification, removeNotification] + [notifications, addNotification, removeNotification], ); return ( @@ -58,7 +58,7 @@ export const useNotification = () => { const context = useContext(NotificationContext); if (!context) throw new Error( - "useNotification must be used within a NotificationProvider" + "useNotification must be used within a NotificationProvider", ); return context; }; diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx index 80368d4b..0d1a84c6 100644 --- a/src/context/ThemeContext.tsx +++ b/src/context/ThemeContext.tsx @@ -32,7 +32,7 @@ export const ThemeContextProvider = ({ children }: PropsWithChildren) => { theme, toggleTheme, }), - [theme, toggleTheme] + [theme, toggleTheme], ); return ( diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index 0cf4d519..f3a62593 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -32,7 +32,7 @@ export const UserContextProvider = ({ setUser({ id: 1, name, email }); addNotification("성공적으로 로그인되었습니다", "success"); }, - [addNotification] + [addNotification], ); const logout = useCallback(() => { diff --git a/src/main.tsx b/src/main.tsx index 77d159f8..f8fc6f51 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,5 +5,5 @@ import App from "./App"; createRoot(document.getElementById("root")!).render( - + , );