zustand에서 global 상태관리 말고 '일부 상태' 만을 관리하기

Q. next.js 에서 zustand에서 글로벌 상태 말고 '일부'를 상태로 쓸 수 있을까?

예를 들어서 1. 컴포넌트간에만 공유하는 상태 2. 페이지끼리만 공유하는 상태 처럼...

 

 

A.  Zustand에서 범위를 제한해서 상태를 관리하는 패턴 4가지

---

1. 컴포넌트간 공유

 

 // stores/componentStore.ts
import { create } from 'zustand'

const useComponentStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

// 사용할 컴포넌트에서만 import해서 사용
export default useComponentStore

---

2. 페이지간 공유

 

Next.js의 폴더 구조를 활용하여 특정 페이지들에서만 사용하는 store를 만들 수 있다.

// app/(dashboard)/stores/dashboardStore.ts
import { create } from 'zustand'

const useDashboardStore = create((set) => ({
  activeTab: 'overview',
  setActiveTab: (tab) => set({ activeTab: tab }),
}))

export default useDashboardStore

 

---

3. Context와 조합하여 범위 제한하기

// contexts/ScopedStoreProvider.tsx
import { createContext, useContext } from 'react'
import { create } from 'zustand'

const createStore = () => create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

const StoreContext = createContext(null)

export function ScopedStoreProvider({ children }) {
  const store = createStore()
  
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  )
}

export function useScopedStore() {
  const store = useContext(StoreContext)
  if (!store) throw new Error('Store Context가 없습니다!')
  return store
}

3. Context와 조합하여 범위 제한하기의 사용예시 

// 특정 레이아웃이나 페이지에서
<ScopedStoreProvider>
  <ComponentA />
  <ComponentB />
</ScopedStoreProvider>

// ComponentA나 B에서
const store = useScopedStore()

---

4. Store Factory 패턴

// stores/createFeatureStore.ts
import { create } from 'zustand'

const createFeatureStore = (initialState) => {
  return create((set) => ({
    ...initialState,
    updateState: (newState) => set(newState),
  }))
}

// 필요한 곳에서 새로운 store 인스턴스 생성
const useFeatureAStore = createFeatureStore({ featureData: [] })
const useFeatureBStore = createFeatureStore({ featureData: [] })
```

이러한 패턴들의 장단점:

장점
- 상태 관리의 범위를 명확하게 제한할 수 있음
- 불필요한 리렌더링 방지
- 코드 구조가 명확해짐

단점
- 여러 store를 관리해야 하는 복잡성
- Context 사용 시 약간의 오버헤드
- 상태 공유 범위를 잘못 설정할 수 있는 위험

필요에 따라 이러한 패턴들을 조합해서 사용할 수 있다.

어떤 패턴이 가장 적합할지는 프로젝트의 구조와 요구사항에 따라 달라진다.