[FE skill] props drilling을 막기 위한 zustand 사용

알림 데이터를 Layout 에서 받아오는데
Layout에서 알림 기능의 modal 창까지 component가 너무 깊어
쓸데없이 props로 넘기고 넘기고 넘기다가 코드 가독성이 너무 안좋아져
zustand로 layout 컴포넌트에서 전역변수로 담고 모달창에서 데이터를 띄울때만 가져오기로 했다.

대신 알람창의 데이터가 바뀔때마다 해당 모달창의 값들이 변경되야하므로
useEffect를 사용해서 [data]가 바뀔때 zustand의 set 함수를 불러오도록 했다.

export const useAlarmStore = create<useAlarmStoreProps>((set)=>({
  modalState : false,
  alarmData: [],
  modalToggle : () => set((prevState)=>({modalState: !prevState.modalState})),
  modalFalse : () => set({modalState : false}),
  setAlarmData: (newAlarm)=> set(()=>({alarmData:newAlarm}))
}))

해당 zustand 코드로 alarmData의 초기 값을 [ ] 로 두고 setAlarmData로 알람 데이터를 그때그때 새로운 데이터로 갱신하였다.

하나의 데이터가 추가됐을때 그 하나가 아니라 전부 렌더링 되는것을 고치고 싶지만 그렇다고 하나를 추가하기 위해서 전체의 데이터를 한번 검사하는것이 더 비효율적이라고 판단하여 다시 갱신하는 쪽으로 택했다.
하지만 어느 것이 좋은지는 좀더 살펴봐야겠다.