StateManagement

Info

Introduction - Zustand

How to use Zustand

• zustand 사용
  • 사용 이유 : 타 상태관리보다 러닝 커브가 낮고 관리 포인트가 적음.
• store의 구조는 단순하게 데이터의 CRUD만 담당
  • 복잡한 로직들은 모두 service layer에서 처리함.
  • 역할상으로는 화면에서 구독중인 repository라고 볼 수 있음.

Creation

• 상단에 interface 정의 필요.
• use{name}Store.ts 네이밍 규칙 사용.
• 내부 fields 네이밍 규칙은 따로 없이 저장할 값에 따라 네이밍 중…
• 구성
  • Object
    • 저장할 값 자체 (초기 값 지정 필요.)
  • Object state change functions
    • Update - 변경할 값 세팅
    • Delete - 초기 값으로 다시 세팅
    • Ect Functions - 추가적인 Functions

example

useShceduleStore.ts

import { Schedule } from '@typings/Schedule'  
import { create } from 'zustand/react'  
  
interface ScheduleStore {  
  schedules: Schedule[]  
  setSchedules: (schedules: Schedule[]) => void  
  addSchedules: (schedule: Schedule) => void  
  deleteSchedules: (id: number) => void  
  modifySchedules: (id: number, schedule: Schedule) => void  
}  
  
const useScheduleStore = create<ScheduleStore>(set => ({  
  schedules: [],  
  setSchedules: schedules => set({ schedules }),  
  addSchedules: schedule => set(state => ({ schedules: [...state.schedules, schedule] })),  
  deleteSchedules: id =>  
    set(state => ({ schedules: [...state.schedules.filter(schedule => schedule.id != id)] })),  
  modifySchedules: (id, schedule) => {  
    set(state => ({  
      schedules: state.schedules.map(stateSchedule =>  
        stateSchedule.id == id ? schedule : stateSchedule,  
      ),  
    }))  
  },  
}))  
  
export default useScheduleStore

Usage

• 관리 포인트를 서비스 로직에 강제시키기 위해서 modelView에서만 사용 가능.
  • 이외의 사용처에서는 modelView에서 리턴 시켜준 값을 간접적으로 사용해야함.
• 초기 값은 비동기가 필요한 경우에는 null 또는 [](빈 array)로 초기화하고 modelView에서 init() function을 통해 다시 할당.
• selector를 통해 값을 바인딩 해야 함.
  • selector로 화면에 필요한 state를 지정함에 따라 해당 state가 변하는 시점에만 리렌더링 가능.
  • 많은 값을 selector를 통해 가져와 분해 할당할 경우, useShallow로 얕은 비교를 해야 불필요한 loop가 발생하지 않음.
• store의 값은 BE에서 전달해준 값 자체를 저장하거나 FE에서 사용하기 편한 윈시 값으로 저장하기 때문에 화면에서 다른 format이 필요한 경우, useMemo를 통해 format을 변경하여 사용해야함.
  • 꼭 필요한 경우가 아니라면 store의 값은 되도록 변경하면 안됨.

example

useMonthlyCalendarViewModel.ts

import calendarRepository from '@repositories/CalendarRepository'  
import { useMemo } from 'react'  
import { Calendar } from '@typings/Calendar'  
import dateFormatUtil from '@utils/date/dateFormatUtil'  
import { ScheduleOfDate } from '@typings/ScheduleOfDate'  
import scheduleRepository from '@repositories/ScheduleRepository'  
import useCalendarStore from '@stores/useCalendarStore'  
import useScheduleStore from '@stores/useScheduleStore'  
import { useShallow } from 'zustand/react/shallow'  
import useCalendarSelectStore from '@stores/useCalendarSelectStore'  
import { scheduleType } from '@typings/constants/ScheduleType'  
  
const useMonthlyCalendarViewModel = () => {  
  const currentDate = useCalendarSelectStore(useShallow(state => state.currentDate))  
  
  const { calendar, setCalendar } = useCalendarStore(  
    useShallow(state => ({  
      calendar: state.calendar,  
      setCalendar: state.setCalendar,  
    })),  
  )  
  
  const { schedules, setSchedules } = useScheduleStore(  
    useShallow(state => ({  
      schedules: state.schedules,  
      setSchedules: state.setSchedules,  
    })),  
  )  
  
  const { stringToDate } = dateFormatUtil  
  
  const calculatedMonthlyCalendar: null | Calendar = useMemo(() => {  
    if (!calendar) return null  
  
    const copyCalendar: Calendar = Object.assign(calendar)  
  
    const schedulesOfDate = schedules  
      .sort(a => (a.type == scheduleType.TASK ? 1 : -1))  
      .sort((a, b) => (stringToDate(a.startedAt).isAfter(stringToDate(b.startedAt)) ? 1 : -1))  
      .map((schedule, index) => schedule.getScheduleOfDateList(index + 1))  
      .flatMap(schedules => schedules)  
  
    let prevSchedules: ScheduleOfDate[] = []  
  
    copyCalendar.dates.forEach(date => {  
      const resultSchedules: ScheduleOfDate[] = []  
      const targetSchedules: ScheduleOfDate[] = schedulesOfDate.filter(  
        schedule =>  
          schedule.year == date.year && schedule.month == date.month && schedule.day == date.day,  
      )  
  
      let prevIndex = 0  
      // 빈 요소 null 세팅 => 화면에서 사용 할 경우, null 값에 대한 대응 필요.  
      targetSchedules.forEach(schedule => {  
        const prevScheduleIndex = prevSchedules.findIndex(  
          targetSchedule => targetSchedule != null && targetSchedule.id == schedule.id,  
        )  
        for (let i = prevIndex; i < prevScheduleIndex; i++) resultSchedules.push(null)  
  
        prevIndex = prevScheduleIndex + 1  
      })  
  
      // 일정 세팅  
      targetSchedules.forEach(schedule => {  
        const prevScheduleIndex = prevSchedules.findIndex(  
          targetSchedule => targetSchedule != null && targetSchedule.id == schedule.id,  
        )  
        if (prevScheduleIndex != -1) {  
          resultSchedules[prevScheduleIndex] = schedule  
        } else {  
          const nullIndex = resultSchedules.findIndex(targetSchedule => targetSchedule == null)  
          if (nullIndex != -1) {  
            resultSchedules[nullIndex] = schedule  
          } else {  
            resultSchedules.push(schedule)  
          }        }  
      })  
  
      prevSchedules = resultSchedules  
      date.schedules = resultSchedules  
    })  
  
    return copyCalendar  
  }, [calendar, schedules])  
  
  const setMonthlyCalendar = async () => {  
    setCalendar(null)  
    setSchedules([])  
  
    const monthlyCalendar = await calendarRepository.getMonthlyCalendar({  
      year: currentDate.year,  
      month: currentDate.month,  
    })  
  
    const scheduleList = await scheduleRepository.findByDate({  
      year: currentDate.year,  
      month: currentDate.month,  
    })  
  
    setCalendar(monthlyCalendar)  
  
    setSchedules(scheduleList)  
  }  
  
  const init = async () => {  
    console.log('init!!')  
    await setMonthlyCalendar()  
  }  
  
  return {  
    calculatedMonthlyCalendar,  
    currentDate,  
    init,  
  }  
}  
  
export default useMonthlyCalendarViewModel