2021_08_24

jiwon22·2021년 8월 24일
0

TIL - redux-persist란?

파이널 프로젝트를 진행하는 동안 redux를 이용해 상태 관리를 했었는데, 페이지 새로고침이나 다른 페이지로 이동할 때 상태유지가 안되는 문제가 발생했었다. store에 담긴 상태가 초기화되는 것이다.

예를들면 사용자가 로그인 후 새로고침을 했을 때 로그인이 풀려버리는 것이 문제였다.
이 문제를 해결하기 위해 redux-persist를 이용했다.

1. redux-persist란?

persist는 '지속하다' 라는 뜻이 있다. redux-persist는 말 그대로 무언가를 지속하겠다는 의미이다. 무엇을 지속할까?? 바로 '상태' 이다.

"store에 담겨있는 redux의 state를 유지할 수 있게 도와주는 라이브러리"

2. localStorage와 sessionStorage

redux-persist를 이용해 상태를 유지하기 위해선 특정한 곳에 상태를 저장해 두어야 할 것이다. 이 때 특정한 곳은 크게 두 가지가 있다. localStorage와 sessionStorage이다.

localStorage와 sessionStorage 모두 브라우저 application 탭의 Storage에서 확인 할 수 있다. localStorage는 페이지를 새로 고침 해도, 브라우저를 껐다 켜도 저장된 정보가 남아있다. sessionStorage는 페이지를 새로 고침 해도 정보가 남아있지만 탭이나 브라우저를 종료하면 사라진다는 차이점이 있다.

3. redux-persist 사용하기

가장 먼저 redux-persist 라이브러리를 설치해야한다.

npm install redux-persist

1. reducer: 기존의 reducer에 persistConfig를 만들고 persistReducer 함수 안에 넣는다.

import { combineReducers } from "redux";
import userInfoReducer from "./userInfoReducer";
import postInfoReducer from "./postInfoReducer";
// reducer를 persist할 수 있게 해주는 persistReducer
import { persistReducer } from "redux-persist";
// 정보를 localStorage에 저장하고싶으면
import storage from "redux-persist/lib/storage";
// 정보를 sessionStorage에 저장하고싶으면
// import storage from "redux-persist/lib/storage/session"
//새로운 persistConfig를 생성한다.
const persistConfig = {
  key: "root",
  storage: storage, // 9번째 줄에서 import한 storage를 지정해준다.
  whitelist: ["userInfoReducer"], // 유지하고 싶은 데이터를 배열 안에 지정한다.
  // combineReducers 안에 지정된 값들을 사용한다. 이렇게 하면 특정 reducer만 storage에 저장 할 수 있다.
  // 특정 reducer만 storage에 저장하지 않도록 하기 위해서는 blacklist를 사용하면 된다.
  // blacklist: ["userInfoReducer"]
};
const rootReducer = combineReducers({
  userInfoReducer,
  postInfoReducer,
});
export default persistReducer(persistConfig, rootReducer);
// persistReducer 함수안에 persistConfig와 rootReducer를 넣어서 export 한다.
// 이 뜻은 수정된 rootReducer를 persistConfig의 조건에 맞게 persist 하여 export 하겠다는 뜻이다.
// 단순하게 rootReducer에 persist 능력을 추가해준 것이다.

2. store: persistStore를 생성하고 persistStore 함수의 반환값 persistor를 export 한다.

import { compose, createStore, applyMiddleware } from "redux";
import rootReducer from "../reducers/index";
import thunk from "redux-thunk";
// 새로고침, 종료해도 지속적으로 정보가 저장될 store 생성
import { persistStore } from "redux-persist";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;
export const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);
export const persistor = persistStore(store);
export default { store, persistor };

3. index: 2번에서 export 한 persistor를 PersistGate 의 인자로 넘겨준다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { store, persistor } from "./store/store"; // persistor import
import { PersistGate } from "redux-persist/integration/react"; //PersistGate import
import { Provider } from "react-redux";
import reportWebVitals from "./reportWebVitals";
// 아래의 application의 최상단 컴포넌트를 PersistGate로 감싸고 props로 persistor를 넘겨준다.
ReactDOM.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);
reportWebVitals();

이렇게 적용 하면 로그인 했을 때 localStorage에 정보가 저장이 되고, 새로고침 해도 로그인이 풀리지 않는다.

4. localStorage에 저장된 state 초기화하기

사용자가 로그아웃이나 회원 탈퇴 시에는 localStorage에 저장된 정보가 초기화되어야 한다. 이 땐 persistor.purge() 를 사용하면 된다.

const handleClicklogout = async () => {
    await server
      .get("/logout")
      .then((res) => {
        persistor.purge();
      })
      .catch((err) => {
        throw err;
      });
  };
profile
안녕하세요 유지원입니다

0개의 댓글