diff --git a/apps/wr/app/store/index.tsx b/apps/wr/app/store/index.tsx index 6578fa47d..1b759c30e 100644 --- a/apps/wr/app/store/index.tsx +++ b/apps/wr/app/store/index.tsx @@ -19,12 +19,9 @@ export const StoreProvider = ({ children, }: StoreProviderProps) => { const storeRef = useRef(null) - console.log("StoreProvider"); - if (!storeRef.current) { storeRef.current = StoreZus() } - return ( {children} @@ -36,8 +33,6 @@ export const useWrStore = ( selector: (store: WrStore) => T, ): T => { const storeContext = useContext(StoreContext) - console.log("useStore", storeContext); - if (!storeContext) { throw new Error(`useStore must be used within StoreProvider`) } diff --git a/apps/wr/app/store/publicReuseFaciltyInsert/index.tsx b/apps/wr/app/store/publicReuseFaciltyInsert/index.tsx index 15b252b24..f4f539a3f 100644 --- a/apps/wr/app/store/publicReuseFaciltyInsert/index.tsx +++ b/apps/wr/app/store/publicReuseFaciltyInsert/index.tsx @@ -79,13 +79,9 @@ export const tableStateExport:tableState= { publicReuseFacilityUper: publicReuseFacilityUper, } export const tableActionsExport:(set:any)=>tableActions=(set: any) => { - - console.log("tableActionsExport"); return { decrementList:()=>set( (state:tableState) => { - - console.log("tableActionsExport", state); return ( { upHeadList: state.upHeadList, diff --git a/apps/wr/app/store/readme.md b/apps/wr/app/store/readme.md new file mode 100644 index 000000000..0710aa69b --- /dev/null +++ b/apps/wr/app/store/readme.md @@ -0,0 +1,121 @@ +# Zustand store +## Zustand 등록방법 +**-- index.tsx --** +### context 등록 +기본적으로 createContext를 통해 react에 context를 생성해서 react에서 사용할 수 있도록 해야함. +``` js +//StoreZus는 내부적으로 사용하기 위한 store파일에서 따로 생성함. +export type StoreApi = ReturnType +//react에서 사용하기 위한 context 생성. +export const StoreContext = createContext( + undefined, +) +``` + +### component로 작성 +등록된 context를 component화 시키기 위한 작업 +```js +//외부에서 호출시 형태로 호출. +//app이나 home에서 전체적인 사용이 되도록 작성해야함. +export const StoreProvider = ({ + children, +}: StoreProviderProps) => { + const storeRef = useRef(null) + if (!storeRef.current) { + //StoreZus는 store.tsx를 봐야함. + storeRef.current = StoreZus() + } + return ( + + {children} + + ) +} +``` + +### store 등록 +react에서 사용하는 store에 현재 context 등록 +```js +export const useWrStore = ( + selector: (store: WrStore) => T, +): T => { + const storeContext = useContext(StoreContext) + if (!storeContext) { + throw new Error(`useStore must be used within StoreProvider`) + } + + return useStore(storeContext, selector) +} +``` + +## Zustand 사용방법 +**-- store.tsx, 폴더별 index.tsx --** +### 기본 store 생성 +index.tsx의 context에 사용되는 StoreZus를 추가하여 사용됨. + +외부에서 생성된 state, actions를 사용 가능한 구조 +```js +import { createStore } from 'zustand/vanilla'; +import { tableActionsExport, tableStateExport, type tableState, type tableType } from './publicReuseFaciltyInsert/index';//외부 파일 위치. +export type WrStore = tableType;//typescript이므로 사용되는 스크립트를 type1 & type2 형식으로 넣어야함. +//index.tsx에서 사용하는 store 생성. +export const StoreZus = (initState: tableState = tableStateExport) => { + return createStore()((set) => { + return { + //아래에서 사용하는 state & actions은 외부 폴더에서 가져다가 사용. + ...initState,//외부에 있는 기본 초기값 state + ...tableActionsExport(set)//외부에 있는 actions + } + }) +} +``` +### 외부 스토어 작성 방법 +외부 스토어는 export를 어떻게 할건지만 정하면됨. + +사용하는 store.tsx에서 import를 받기만 하면 사용가능. +#### 타입을 외부로 빼는 방법 +```js +export type tableState = { + isInit: boolean; + upHeadList: TableUpperProps[]; + publicReuseFacilityUper: PublicReuseFacility[]; +} +type tableActions = { + decrementList: () => void +} + +export type tableType = tableState & tableActions; +``` +#### 초기값 state를 외부로 빼는 방법 +```js +export const tableStateExport:tableState= { + isInit:false, + upHeadList: upHeadList, + publicReuseFacilityUper: publicReuseFacilityUper, +} +``` +#### actions를 외부로 빼는 방법 +```js +//tableActionsExport를 import 받아서 실행하여 return 된 값을 사용 +export const tableActionsExport:(set:any)=>tableActions= +//set을 통해 react store에 등록 +(set: any) => { + return { + //decrementList Object 형태로 전달 + decrementList: + //set 함수를 실행해서 react store에 등록 + ()=>set( + // store에 등록되는 함수 구조를 가지고 있음. + (state:tableState) => { + //actions 실질적인 로직 작성하는 곳. + return ( + { + upHeadList: state.upHeadList, + publicReuseFacilityUper: + state.publicReuseFacilityUper.slice(0, state.publicReuseFacilityUper.length - 1) + })} + ) + } +} +``` +