🛠️ Redux Persist 설정 가이드

Redux Persist는 Redux 상태를 로컬 스토리지(LocalStorage) 또는 세션 스토리지(SessionStorage)에 저장하여 페이지 새로고침 후에도 상태를 유지할 수 있도록 도와주는 라이브러리

---

📦 1. 설치

npm install redux-persist

---

⚙️ 2. 설정

2.1 store.jsx 설정

// Redux Persist 관련 import
import { persistStore, persistReducer } from 'redux-persist';

// 로컬 스토리지 사용
import storage from 'redux-persist/lib/storage';

// 세션 스토리지 사용 시
import sessionStorage from 'redux-persist/lib/storage/session';

// Redux Toolkit 관련 import
import { configureStore } from '@reduxjs/toolkit';
import userSlice from './userSlice'; // 예시 Slice

---

2.2 퍼시스턴스 설정 및 Store 선언

🧩 (1) persistConfig 설정

const persistConfig = {
  key: 'user', // 저장될 키 이름
  storage,     // 또는 sessionStorage
};

🧩 (2) persistReducer 설정

const persistedReducer = persistReducer(persistConfig, userSlice);

🧩 (3) Redux Store 생성

const store = configureStore({
  reducer: {
    user: persistedReducer,
  },
});

🧩 (4) persistStore 생성 및 내보내기

export const persistor = persistStore(store);
export default store;

---

2.3 main.jsx에서 적용

import ReactDOM from 'react-dom/client';
import App from './example/day05_250923/Task7/App';

// Redux 관련 import
import store, { persistor } from './example/day05_250923/Task7/store/store';
import { Provider } from 'react-redux';

// Redux Persist 관련 import
import { PersistGate } from 'redux-persist/integration/react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

---

💡 3. 팁 & 주의사항

• PersistGate의 loading 속성은 상태 복원 중 보여줄 UI를 설정할 수 있음
• null은 아무것도 표시하지 않음
• 여러 Slice를 사용하는 경우, combineReducers를 통해 통합한 후 persistReducer에 적용해야 합니다.
• blacklist 또는 whitelist 옵션을 통해 특정 Slice만 저장하거나 제외할 수 있습니다.

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user'], // user만 저장
  // blacklist: ['temp'], // temp는 저장 제외
};

---