state를 어떻게 persist(영속화)하고 hydrate(복원)하나요?

Question

Accepted Answer

state를 **persist(영속화)**한다는 것은 페이지 새로고침이나 세션을 넘어 살아남도록 저장소(localStorage, IndexedDB, 백엔드)에 저장하는 것을 의미합니다. **hydrate(복원)**한다는 것은 시작 시 그것을 앱으로 다시 불러오는 것을 의미합니다. 장바구니, 인증 토큰, 사용자 환경설정, 임시 폼에 흔히 쓰입니다.

## localStorage로 기본 persist + hydrate

```jsx
function useCart() {
  // HYDRATE: 저장소에서 초기화(lazy initializer는 한 번만 실행됨)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // 저장된 JSON 파싱
    } catch {
      return [];                                   // 손상된 데이터 방어
    }
  });

// PERSIST: 바뀔 때마다 저장소에 기록
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

두 절반: 초기화 시 읽고 파싱하기(hydrate), 변경 시 직렬화하고 기록하기(persist).

## 라이브러리 지원

```js
// Zustand persist 미들웨어 — 자동 persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// Redux용 redux-persist; 둘 다 직렬화 + 재복원을 처리함
```

## 저장소 선택

```text
localStorage  → 단순, 동기, ~5~10MB, 문자열만(JSON) — 환경설정, 작은 state
sessionStorage→ localStorage와 비슷하지만 탭이 닫히면 지워짐
IndexedDB     → 크고/구조화된 데이터, 비동기 — 오프라인 앱, 큰 캐시
Cookies       → 서버로 전송됨; 인증용(보안을 위해 httpOnly)
Backend       → 기기 간 동기화, 중요한 데이터의 진실 공급원
```

## 중요한 주의사항

```text
⚠️ SSR 불일치: localStorage는 서버에 존재하지 않음 → typeof window로 방어하고,
   서버 렌더링 state와 클라이언트 state 간 hydration 불일치에 유의하세요.
⚠️ 버전 관리/마이그레이션: 저장된 형태가 새 코드와 다를 수 있음 → 버전을 매기고 마이그레이션.
⚠️ 민감한 데이터(토큰)를 localStorage에 persist하지 말 것(XSS로 읽힘) — httpOnly 쿠키 선호.
⚠️ refetch 가능한 server state를 persist하지 말 것(캐싱은 React Query에 맡기기).
⚠️ hydrate 시 검증/방어 — 저장된 데이터는 오래되거나 손상될 수 있음.
```

## 왜 중요한가

영속화는 실질적인 UX 가치를 제공합니다 — 장바구니가 새로고침을 견디고, 환경설정과 임시 입력이 사라지지 않으며, 사용자가 로그인 상태를 유지합니다.

하지만 순진한 구현은 미묘하고 심각한 문제를 도입합니다: SSR hydration 불일치, 오래되거나 손상된 데이터, 스키마 마이그레이션 파손, 그리고 **보안 위험**(XSS로 읽히는 저장소에 토큰을 persist).

persist/hydrate 패턴을 알고, 데이터에 맞는 저장소를 고르며, 주의사항을 존중하는 것(SSR 방어, 스키마 버전 관리, 비밀을 안전하지 않게 저장하지 않기, refetch 가능한 server state를 persist하지 않기)이 영속화를 진단하기 어려운 버그의 원천이 아니라 견고하게 만듭니다.