Zustand 공식 홈페이지 따라하기 (3) - 블로그 참조하기

 

이번 포스트에서는 나머지 부분을 정리해보고자 한다.

여전히 https://www.heropy.dev/p/n74Tgc

Zustand 핵심 정리

블로그를 참조하고 있다.

 

상태 구독 (subscribeWithSelector)

스토어 훅에서 subscribe 함수를 사용하면, 스토어의 모든 상태 변경을 구독(상태를 감지해 리스너를 호출)한다.

그리고 subscribe 함수의 반환을 호출하면 구독을 해제할 수 있다.

 

const selector = state => state.구독할상태
const listener = (newState, oldState) => {}
const unsubscribe = useCountStore.subscribe(selector, listener)
unsubscribe() // 구독 해제

 

다음의 예제는 count 상태를 구독해, count 상태가 변경될 때마다 double 상태를 변경하는 예제이다.

import { create } from 'zustand'
import { combine, subscribeWithSelector } from 'zustand/middleware'
import { immer } from 'zustand/middleware'

const initialState = {
	count: 1,
    double: 2,
 }
 
 export const useCountStore = create(
 	subscribeWithSelector(
    	immer(
        	combine(
            	initialState,
                set => ({
                	actions: {
                    	increase: () => set(state => { state.count += 1}),
                        decrease: () => set(state => { state.count -= 1})
                    }
                })
             }
           }
         }
      }

// double getter
useCountStore.subscribe(
	state => state.count, // Selector
    count => {
    	console.log(useCountStore.getState().double)
        useCountStore.setState(() => ({ double: count * 2}))
     }
)

 

만약 단일 컴포넌트에서만 구독을 사용하는 경우 useEffect를 사용한다

export default function App() {
	const [double, setDouble] = useState(2)
    
    	// 컴포넌트 언마우늩 시 구독 해제
      useEffect(() => useCountStore.subscribe(
        state => state.count,
        count => { setDouble(count * 2) }
      ), [])

 

스토리지 사용(Persist)

Zustand는 persist 미들웨어를 사용해 스토리지에 상태를 저장하고 불러올 수 있다.

이를 통해 페이지를 새로고침하거나 다시 방문했을 때에도 상태를 유지할 수 있다.

스토리지에 저장될 스토어의 고유한 이름을 필수 옵션(name)으로 제공해야하며, 로컬, 세션, 커스텀 스토리지에 저장할 수 있다

import { create } from 'zustand'
import { combine, subscribeWithSelector, persist, createJSONStoreage } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

const initialState = {
	count: 1,
    double: 2
}

export const useCountStore = crate(
	persist({
    	subscribeWithSelector(
        	immer(
            	combine(
                	initialState,
                    set => ({
                    	// actions: { //스토리지(persist)사용을 위해 제거
                        increase: () => set(state => { state.count +=1 }),
                        decrease: () => set(state => { state.count -=1 })
                   })
               }
            },
            { 
            	name: 'countStore', // 스토리지에 저장될 고유한 이름
                // storage: createJSONStorage(() => sessionStorage) // 기본값: localStorage