상태를 초기화하는 방법 (How to reset state)
여러분, Zustand로 개발을 하시다 보면 상태(State)를 맨 처음 설정했던 초기값으로 되돌려야 할 때가 있죠? 다음 패턴을 사용하면 상태를 초기값으로 아주 쉽게 리셋할 수 있어요.
👨🏫 강사의 보충 설명 & 실무 팁!
프론트엔드 개발을 하다 보면, 사용자가 작성하던 폼 입력을 취소하거나 특히 로그아웃을 할 때 스토어에 남아있는 유저 정보나 상태들을 깨끗하게 비워줘야 하는 경우가 정말 많습니다.
이때 초기 상태 객체(initialState)를 스토어 외부에 변수로 따로 빼서 관리하고 덮어씌우는 방식을 쓸 수도 있지만, Zustand에서 제공하는store.getInitialState()메서드를 활용해 스토어 내부에reset액션을 만들어두면 훨씬 응집도 높고 깔끔한 코드를 작성할 수 있답니다!
const useSomeStore = create<State & Actions>()((set, get, store) => ({
// your code here
reset: () => {
set(store.getInitialState())
},
}))한 번에 여러 개의 스토어 초기화하기 (Resetting multiple stores at once)
👨🏫 강사의 보충 설명 & 실무 팁!
실무에서 프로젝트 규모가 커지면 스토어를 역할에 따라 여러 개로 (예:userStore,cartStore,uiStore등) 쪼개서 관리하게 되는데요.
만약 전체 시스템을 초기화해야 할 때 (예: 서비스 로그아웃, 세션 만료 등) 이 수많은 스토어들의reset함수를 일일이 찾아서 호출하는 건 너무 번거롭고, 실수로 하나를 빼먹을 위험도 큽니다.아래 코드는 이런 문제를 해결하는 정말 유용한 고급 실무 패턴이에요! Zustand의 원래
create함수를 한 겹 래핑(Wrapping)해서 우리만의 커스텀create함수를 만드는 방식입니다.
이렇게 만들어두면, 앞으로 스토어를 생성할 때마다 해당 스토어를 초기화하는 로직이storeResetFns라는 Set(집합)에 자동으로 쏙쏙 등록됩니다. 나중에는resetAllStores()함수 딱 하나만 호출하면 모든 스토어가 일괄적으로 초기화되는 마법을 볼 수 있어요!💡 강조 포인트: 아래 코드에서
store.setState(store.getInitialState(), true)부분을 잘 봐주세요. 두 번째 인자로true가 들어갔죠? Zustand에서setState의 두 번째 인자를true로 주면, 기존 상태와 새 상태를 '병합(Merge)'하는 게 아니라 기존 상태를 아예 날려버리고 '완전히 덮어쓰기(Replace)'를 하겠다는 뜻이에요. 초기화 작업에서 필수적인 옵션이니 꼭 기억해 두세요!
import type { StateCreator } from 'zustand'
import { create: actualCreate } from 'zustand'
const storeResetFns = new Set<() => void>()
const resetAllStores = () => {
storeResetFns.forEach((resetFn) => {
resetFn()
})
}
export const create = (<T>() => {
return (stateCreator: StateCreator<T>) => {
const store = actualCreate(stateCreator)
storeResetFns.add(() => {
store.setState(store.getInitialState(), true)
})
return store
}
}) as typeof actualCreate데모 (Demo)
백문이 불여일견이죠? 아래 링크를 통해 직접 코드가 어떻게 동작하는지 눈으로 확인해 보세요!
- 기본적인 초기화 방법 (Basic): https://stackblitz.com/edit/zustand-how-to-reset-state-basic
- 고급 초기화 방법 (Advanced): https://stackblitz.com/edit/zustand-how-to-reset-state-advanced
이전 글 (Previous) Flux에서 영감을 받은 프랙티스 (Flux inspired practice)
다음 글 (Next) create API 참고서 (create)
💬 강사의 한마디: 여기까지 Zustand의 상태 초기화 방법에 대해 알아봤습니다. 여러 스토어를 한 번에 리셋하는 커스텀
create함수의 동작 원리가 잘 이해되셨나요? 만약Set을 다루는 부분이나StateCreator타입에 대해 좀 더 짚고 넘어가고 싶으시다면 언제든 말씀해 주세요! 더 자세히 설명해 드릴게요.
