Store with Zustand

전역 상태관리 사용에 대한 내용입니다.

해당 기능은 공통업무 기능입니다. 다음과 같이 미리 준비된 Boilerplate confy-app 형태로 제공됩니다.
전역 상태관리는 zustand 라이브러리를 사용하여 구현되어 있습니다.

공통업무 기능이외에 사용하는 경우가 많지 않습니다. 필요한 시점에만 구현하여 사용하세요.

주요 구성 요소

persist 미들웨어를 사용하여 로컬 스토리지에 상태를 저장합니다.
개발 환경에서는 devtools 미들웨어로 Redux DevTools와 연동됩니다.

─ src
  └── shared
      └── stores/               # store 함수
          ├── siteinfo.store.ts # 기초데이터 store
          └── userinfo.store.ts # 사용자정보 store

Usage

Store 작성

/src/shared/stores/siteinfo.store.ts

import { Siteinfo } from '@/types/global/siteinfo'
import { create } from 'zustand'
import { devtools, persist, subscribeWithSelector } from 'zustand/middleware'

export interface SiteinfoState extends Siteinfo {
  reset: () => void
}

// 초기데이터
const initialState: Siteinfo = {
  siteName: '',
  siteUrl: '',
  siteDescription: '',
  siteKeywords: ''
}

/**
 * 사이트 정보 관련 Zustand 스토어
 * @module SiteInfoStore
 * @typedef {SiteinfoState}
 */
export const useSiteinfoStore = create<SiteinfoState>()(
  devtools( // <- 개발도구 미들웨어
    persist( // <- 영속성 미들웨어
      subscribeWithSelector((set) => ({ //<- 상태변화구독 미들웨어
        ...initialState,
        setState: (newValue: SiteinfoState) => set({ ...newValue }),
        reset: () => set(initialState)
      })),
      {
        name: 'STORE-SITEINFO'
      }
    )
  )
)

Store 사용

/src/pages/menu3/pages/page7.tsx

import { useSiteinfoStore } from '@/shared/stores/siteinfo.store'

export default function Page7() {
  const { siteDescription, siteName, siteKeywords, siteUrl } = useSiteinfoStore(
    (state) => state
  )
  return (
    <div>
      <h1>Page7</h1>
      <div>
        <p>{siteName}</p>
        <p>{siteDescription}</p>
        <p>{siteKeywords}</p>
        <p>{siteUrl}</p>
      </div>
    </div>
  )
}

참고

zustand

PreviousAPI Service

NextForm Validate

Edit this page on GitHub.

Overview

React

NEXT.js

Interface

Store with Zustand

주요 구성 요소

Usage

Store 작성

Store 사용

참고