[♻️refactor]: 체크박스 클릭 콜백 map순회문 밖으로 이동

Team-E2I4 · Apr 22, 2024 · af97f47 · af97f47
1 parent ce44a40
commit af97f47
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/src/pages/MainPage/GameModeCheckBox.tsx b/src/pages/MainPage/GameModeCheckBox.tsx
@@ -2,7 +2,7 @@ import * as Checkbox from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 import { Dispatch, SetStateAction } from 'react';
 import { GAME_MODE_LIST, MAPPED_GAME_MODE_LIST } from './constants/gameMode';
-import { CheckedGameModeType } from './MainPage';
+import { CheckedGameModeType, FilteredGameModeType } from './MainPage';
 
 interface GameModeCheckBoxProps {
   setCheckedGameMode: Dispatch<SetStateAction<CheckedGameModeType>>;
@@ -13,31 +13,31 @@ const GameModeCheckBox = ({
   checkedGameMode,
   setCheckedGameMode,
 }: GameModeCheckBoxProps) => {
+  const onCheckedChange = (mode: FilteredGameModeType) => {
+    setCheckedGameMode((prevState) => {
+      const isNewMode = !prevState[mode];
+      if (mode === 'ALL') {
+        const newState = { ...prevState };
+        let checkGameModeState: keyof CheckedGameModeType;
+        for (checkGameModeState in prevState) {
+          newState[checkGameModeState] = isNewMode;
+        }
+        return newState;
+      }
+      return { ...prevState, [mode]: isNewMode };
+    });
+  };
   return (
     <form className='flex gap-[3rem]'>
       {GAME_MODE_LIST.map((mode, i) => {
         //매 렌더링시 생성되므로 map 바깥으로 뺀다?
-        const onCheckedChange = () => {
-          setCheckedGameMode((prevState) => {
-            const isNewMode = !prevState[mode];
-            if (mode === 'ALL') {
-              const newState = { ...prevState };
-              let checkGameModeState: keyof CheckedGameModeType;
-              for (checkGameModeState in prevState) {
-                newState[checkGameModeState] = isNewMode;
-              }
-              return newState;
-            }
-            return { ...prevState, [mode]: isNewMode };
-          });
-        };
         return (
           <div
             className='flex items-center gap-[0.5em]'
             key={mode}>
             <Checkbox.Root
               checked={checkedGameMode[mode]}
-              onClick={onCheckedChange}
+              onClick={() => onCheckedChange(mode)}
               className='bg-white w-[3rem] h-[3rem] rounded-md flex items-center justify-center shadow-md hover:bg-gray-100/50'
               id={`c${i}`}>
               <Checkbox.Indicator className=''>