3) Redux persist

1. Redux Persist

• Redux Persist는 Redux Store에 저장된 상태(state)를 브라우저 저장소(LocalStorage, SessionStorage 등) 에 영구적으로 저장(persist)할 수 있게 해주는 라이브러리입니다.

• 페이지 새로고침(F5)이나 브라우저를 닫았다가 다시 열어도 상태가 초기화되지 않고 복구됩니다

• 로그인 정보나, 장바구니, 사용자 환경설정 등 새로고침시 유지되어야 하는 데이터는 Redux가 아닌 Redux Persist에 보관해야 합니다.

  • 단, 사용자 정보는 저장시, 권한/인증상태 및 민감하지 않은 유저정보만 관리하고, 보안상 JWT토큰은 HTTP ONLY 쿠기로 관리합니다.

• Redux는 여러 컴포넌트에서 공유하는 필터링/정렬 값, 전역 UI(테마, 모달,알림) 등을 보관합니다.

2. 설치방법

npm install redux-persist

3. 적용 코드 예시

// store.ts
import { configureStore } from "@reduxjs/toolkit"
import { persistStore, persistReducer } from "redux-persist"
import storage from "redux-persist/lib/storage" // localStorage 사용
import authReducer from "./slices/authSlice"
import uiReducer from "./slices/uiSlice"

const persistConfig = {
  key: "root",      // storage에 저장될 key
  storage,          // 사용할 스토리지 엔진
  whitelist: ["auth"], // auth만 저장 (ui는 저장 안 함)
}

const persistedReducer = persistReducer(persistConfig, authReducer)

export const store = configureStore({
  reducer: {
    auth: persistedReducer,
    ui: uiReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // redux-persist 비직렬화 이슈 방지
    }),
})

export const persistor = persistStore(store)