[Redux] 새로고침 유지: Redux Persist 테스트 후기

도입 배경

Redux의 스토어는 페이지 새로고침 시 state의 데이터들이 초기화되기 때문에, 새로고침 시에도 저장된 상태가 없어지지 않도록 캐시 기능을 구현하는 장치가 필요했다.

기존에는 새로고침 시에 로그인이 풀리지 않도록 하기 위해서, LocalStorage로 사용자 인증 상태를 확인하기 위한 토큰을 저장하고 불러와서 사용하고는 했다. 하지만 그 토큰에 페이지의 많은 상태값이 의존하고 있고, LocalStorage에 매번 직접 접근하여 인증 정보를 가져오는 것보다 store에서 관리하는 것이 더 적합하다고 생각했고, 추후 자동 로그인 기능 도입을 위해서도 반드시 대안이 필요할 것이라고 판단하였다. 

또한 새로고침 시에 유지해야 할 상태값들이 많이 추가되었고, 앞으로의 확장성을 위해서도 Redux Persist를 사용하여 새로고침 시에도 저장공간의 데이터를 redux에 불러오는 작업이 필수가 되었다.

 

How to

1. 설치

yarn add redux-persist

 

2. Reducer에 persist store 세팅

// reducers/index.js
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // local Storage
// import storageSession from "redux-persist/lib/storage/session"; // session Storage

import one from "./one";
import two from "./two";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["one"] // one, two reducer 중 one reducer만 localstorage에 저장한다.
};

export const rootReducer = combineReducers({
  one,
  two
});

export default persistReducer(persistConfig, rootReducer);

 

3. Persist Store 적용

// src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import App from "./App";
import configureStore from "./store";
import { rootReducer } from "./reducers";

const store = createStore(rootReducer);
const persistor = persistStore(store);

const Root = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById("root"));

 

사용 후 느낀 점

테스트 후 결과적으로는 프로젝트에서 제외했었다. 이유는 원하는 대로 동작하지 않았고, 대략의 후기를 남겨보자면 강제 재부팅 같은 느낌이었다. 기존의 React 로직이 무시되는 로직처럼 동작했고 마치 sudo 명령어를 사용한 것 같았다. 조금 시간이 흐른 뒤에 후기를 쓰는 거라 어떤 상황에서 문제가 생겼는지 잘 기억이 나지는 않는다.. 아쉽다. 역시 그때그때 기록해야 한다. 

redux-persist 라이브러리 자체 store를 사용하고, PersistGate로 App을 감쌌기 때문에 전체(App)와 부분(컴포넌트나 각 상태)을 나누어 관리하기 어려웠다. 당시 persistConfig에서 whitelist와 blacklist를 제대로 설정해주지 않기 때문으로 추측된다. 

 

참고 링크

- https://medium.com/humanscape-tech/redux-persist-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-2077c9e566d9

- https://kyounghwan01.github.io/blog/React/redux/redux-persist/#%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2