TIL 93. 2024-05-14

Task TODOLIST

• "showModal" socket Event 로직으로 변경
• zustand의 상태관리 부분을 효율적으로 변경

✨ 개발 내용

기존 중복된 로직처리 부분을 하나로 통일

  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