• 목차

불변 상태 관리

React의 useState 훅과 마찬가지로 상태를 불변으로 업데이트 해야 합니다.

import { create } from 'zustand';

const store = (set) => ({
	count: 0,
	increment: () =>
		set((store) => ({
			count: store.count + 1
		}))
});

const useCountStore = create(store);

set 함수는 스토어의 상태를 업데이트합니다. 일반적으로 상태 업데이트는 다음과 같이 해야 합니다.

set((store) => ({ ...store, count: store.count + 1 }))

하지만 set 함수는 상태를 얕게 병합하므로 …store 부분은 건너띌 수 있습니다.

set((store) => ({ count: store.count + 1 }))

중첩 객체

set 함수는 얕게 상태를 병합합니다. 그러므로 중첩된 객체를 포함하는 경우 명시적으로 병합해야 합니다.

import { create } from 'zustand';

const store = (set) => ({
	nested: { 
		count: 0, 
		name: 'countStore' 
	},
	increment: () =>
		set((store) => ({
			**nested: {
				...sotre.nested,
				count: store.nested.count + 1
			}**
		}))
});

export const useCountStore = create(store);

복잡하게 구성된 중첩 객체는 관리가 매우 까다롭습니다. 이런 경우 외부 라이브러리를 활용해 상태 관리하는 것이 좋습니다. 중첩된 상태 객체 값 업데이트를 참고하세요.