[React] React에서 persist사용하기 (react-persist)

우선 persist는 redux를 사용할 때 새로고침을 해도 데이터를 유지하기 위해서 사용되는데

사용하기 위해서는 아래와 같이 우선 설치부터 시작해주자 !

yarn add react-persist

 

설치를 한 후엔 우선 redux의 store를 만들어준 부분에 가서 아래와 같이 만들어 준다. 

import { configureStore } from "@reduxjs/toolkit";
import storage from "redux-persist/lib/storage/session";
import { combineReducers } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";


...

const persistConfig = {
  key: "root",
  storage,

};

const persistedReducer = persistReducer(persistConfig, reducers);

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

export default store;

redux의 store부분에서 설정한 이후 이제 index.js로 넘어가서 다시한번 설정을 해주자 !

import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

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

이렇게만 하면 우선 redux의 persist 작동은 끝이다. 

그러나 persist를 제외하고 싶은 부분이나 아니면 storage에 저장이 아닌 다른 곳에 하고 싶다면 다시 store부분으로 돌아가 아래와 같이 필요한 부분을 변경해주면 된다. 

import storage from "redux-persist/lib/storage/session";

const reducers = combineReducers({
  userSlice: UserSlice.reducer,
  cardDetailSlice: KanbanCardDetailSlice.reducer,
});



const persistConfig = {
  key: "root",
  //저장소를 변경하고 싶다면 위에 import storage에서 받아오는 부분을 바꾸면 된다. 
  //나같은 경우에는 sessionstorage에 저장되게 해놓았다.
  storage,

  // persist제외하고 싶은 부분
  blacklist: ["cardDetailSlice"],
  
  //또는 persist를 적용하고 싶은 부분 따로 설정하지 않으면 모두다 저장된다.
  whitelist: ["userSlice"],
};