기존 중복된 로직처리 부분을 하나로 통일
const socketArr = [ { eventName: "showModal", handler: (title: string, timer: number) => { console.log("showModal", title, timer);
// 모달창 요소
setIsOpen(true);
setTitle(title);
setTimer(timer);
setIsOverlay(false); //캠 클릭 이벤트 비활성화
}
}
];
>zustand의 불필요한 렌더링을 방지하기 위해 아래의 코드로 변경
```tsx
import { ShowModalState } from "@/types";
import { create } from "zustand";
//NOTE - 모달의 데이터 요소
const useShowModalStore = create<ShowModalState>((set) => ({
isOpen: false,
title: "",
timer: -1,
actions: {
setIsOpen: (newIsOpen) => set({ isOpen: newIsOpen }),
setTitle: (newTitle) => set({ title: newTitle }),
setTimer: (newTimer) => set({ timer: newTimer })
}
}));
//NOTE - modal on, off
export const useModalIsOpen = () => useShowModalStore((state) => state.isOpen);
//NOTE - GroupModal 요소
export const useGroupModalElement = () => useShowModalStore((state) => state.title);
///NOTE - modal timer
export const useModalTimer = () => useShowModalStore((state) => state.timer);
//NOTE - modal action 관리
export const useModalActions = () => useShowModalStore((state) => state.actions);
https://velog.io/@leejungoo1396/Zustand-%EC%82%AC%EC%9A%A9%EB%B2%95
https://github.com/pmndrs/zustand