Zustand Persist와 Hydration
in Zustand / React on Zustand, Hydration, Persist, 상태관리, React
Zustand의 persist 미들웨어를 사용하여 상태 복원 시의 hydration 문제를 해결하는 방법을 배울 수 있습니다.
요약
- Zustand의
persist미들웨어를 사용하여 상태를 저장하는 방법을 이해합니다. - 비동기 프로세스인 hydration에 대해 알아봅니다.
isHydrated플래그를 통해 상태 복원 시점을 관리하는 방법을 배웁니다.
배경/문제
Zustand의 persist 미들웨어는 상태를 localStorage 또는 sessionStorage에 저장하고, 앱 재시작 시 복원하는 기능을 제공합니다. 이 과정에서 hydration이라고 하는 비동기 프로세스가 발생하며, 이로 인해 앱 초기화 시점에 상태가 아직 복원되지 않았을 수 있습니다.
예를 들어, 다음과 같은 코드가 있다고 가정해봅시다.
// App.tsx
useEffect(() => {
if (isAuthenticated) {
validateToken() // hydration 전에 실행될 수 있음!
}
}, [])
위 코드는 persist가 복원되기 전에 validateToken이 실행될 수 있어 isAuthenticated가 항상 false일 수 있습니다.
접근/해결 전략
이 문제를 해결하기 위해 isHydrated라는 플래그를 사용하여 hydration이 완료되었는지를 관리하는 방법을 제안합니다. 이를 통해 app이 회복된 상태에서만 추가 작업을 수행하도록 할 수 있습니다.
구현 포인트
상태 설정
authStore.ts 파일에서는 상태 인터페이스를 정의하고 isHydrated 플래그를 추가합니다.
// authStore.ts
interface AuthState {
isAuthenticated: boolean
isHydrated: boolean
// ...
}
export const useAuthStore = create<AuthState>()(
persist(
(set, get) => ({
isAuthenticated: false,
isHydrated: false,
// ...
}),
{
name: 'auth-storage',
onRehydrateStorage: () => (state) => {
// hydration 완료 후 호출
if (state) {
state.isHydrated = true
}
},
}
)
)
useEffect 수정
App.tsx 파일에서 useEffect를 수정하여 isHydrated가 true인 경우에만 validateToken을 호출하도록 합니다.
// App.tsx
const { isAuthenticated, isHydrated, validateToken } = useAuthStore()
useEffect(() => {
if (isHydrated && isAuthenticated) {
validateToken()
}
}, [isHydrated, isAuthenticated])
주의사항/트레이드오프
- onRehydrateStorage: 이 옵션을 사용하여 hydration 완료 시점을 감지할 수 있습니다. 이로 인해 불필요한 API 호출을 방지할 수 있습니다.
- isHydrated 플래그: 이 플래그는 hydration 완료 여부를 상태로 관리하므로, 추가적인 로직을 간결하게 유지합니다.
- 의존성 배열:
isHydrated를useEffect의 의존성 배열에 포함시켜 상태 변화에 따른 작동을 보장합니다.
마무리
- Zustand의
persist미들웨어를 활용하여 상태를 유지하고 복원하는 기술을 구현했습니다. - hydration 프로세스에서 발생할 수 있는 문제를 해결하기 위한
isHydrated플래그의 사용법을 배웠습니다.
체크리스트
- Zustand 설치 및 설정
persist미들웨어 적용 확인isHydrated플래그 도입- 추가적인 테스트 케이스 작성
이를 통해 Zustand를 더욱 효과적으로 사용할 수 있습니다.
