![]()
개요 입력폼 map 돌리는걸 생각 못하고 일단은 input값을 추가할때마다 span 태그로 감싸진 리스트에 추가하게끔 했다. 하지만 이 기능은 추가 버튼을 눌러야만 추가가 되다보니 입력만하고 넘어가는 경우가 생겼다. 그래서 UX적으로 여러개의 input값을 받을 수 있게끔 변환 작업을 했다. 1. input 입력값 인터페이스 타입 지정 export interface NewOptionDetailType { id: string; name: string; option_id: string; price: string | number; } 2. input 입력값 전역상태 선언 menuOptionDetail: { id: '', name: '', option_id: '', price: '', }, menuOptionD..
전역 상태 즉각 업데이트에서 문제를 겪었다가 짧은 코드인데, 나중에 또 까먹을 때 활용하기 좋아 기록한다. zustand나 useState가 즉시 업데이트되지 않는 이유는 React의 업데이트는 비동기적으로 처리되기 때문이다. useState 함수 호출은 컴포넌트의 상태를 변경하는 것을 예약(reserving)하는데, 이 예약된 상태 변경은 나중에 React가 업데이트를 수행할 때 일어난다. React는 성능을 향상시키기 위해 여러 상태 변경을 일괄 처리하고, 일괄 처리된 결과를 화면에 반영한다. 이 과정에서 비동기 처리가 사용되며, 업데이트는 다음 렌더링 사이클에서 반영된다고 한다. setMenuOptions([...menuOptions, { menu_id: addData[0].id }] as Menu..
zustand에서는 store함수안에 state와 action을 같이 사용한다. import { create } from 'zustand'; interface countType { number: number } const useCountStore = create(set => ({ number: 0, plusNumber: (value) => set((state) => ({ number: state.number + value })) miunsNumber: (value) => set((state) => ({ number: state.number - value })) } export default useCountStore 이런식으로 하나의 store안에 state와 action을 선언한다. 단점은 코드가 길어지..
import { CategoryWithMenuItem, Tables } from '@/types/supabase'; import { create } from 'zustand'; /** * 관리자 메뉴 추가를 위한 물품 관리 store */ interface MenuItemStoreType { sampleImage: string; isShow: boolean; toggleShow: (item: boolean) => void; menuItem: Tables; setMenuItem: (item: Tables) => void; menuItemList: Tables[]; setMenuItemList: (item: Tables[]) => void; categoryWithMenuItem: CategoryWithMen..
