[React][Redux] redux-persist란? - redux-persist 세팅방법

redux-persist

앞서 redux에 대하여 알아봤었다. redux를 사용하다 보면 가장 불편한 점 중 하나가 바로 새로고침이 되면 저장된 상태가 초기화 된다는 것이다. store는 createStore 함수를 통해 생성되는데, javascript 객체의 형태로 생성된다. 그래서 새로고침이 되거나 페이지가 꺼지면 생명주기가 다하는 것이다.

redux-persist는 이 점을 보완한 라이브러리인데, javascript 객체로 상태를 보관하는 것이 아니라, 개발자가 설정한 configuration에 따라 session storage 또는 local storage에 상태가 저장된다. 즉, 새로고침을 하더라도 상태가 그대로 유지된다.

session storage와 local storage를 사용하는 것은 약간의 차이가 있는데 각 저장소의 특성에 따른 차이가 있다. session storage는 창을 닫았다가 다시 열면 값이 초기화가 되는 반면, local storage는 창을 닫았다가 열어도 값이 유지가 된다는 점이다.

---

세팅 방법

앞서 redux 세팅방법에서 했던 설정과 거의 똑같은데 약간의 설정만 추가된다고 보면 된다. 물론 사용되는 라이브러리는 다르다.

마찬가지로 react 설치방법에서 설치한 react 애플리케이션이 있다고 가정하고 진행된다.

1. 라이브러리 설치

# npm 사용할 때
> npm install redux redux-persist

# yarn 사용할 때
> yarn add redux redux-persist

2. RootReducer 생성

// store/RootReducer.ts
import { combineReducers } from "redux";

/**
 * 모든 Reducer를 합침
 */
const rootReducer = combineReducers({
  // 생성한 reducer가 들어갈 자리
})

export default rootReducer

3. Store 생성

// store/Store.ts
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
// session storage 사용 원하면 세션 import
// import storage from "redux-persist/lib/storage/session";
import rootReducer from './RootReducer';

const persistConfig = {
  key: 'root',
  storage,
  // whitelist: [] // 배열에 포함된 것만 persist 적용
  // blacklist: [] => 배열에 포함된 것만 persist 제외
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

4. main.tsx에 적용

// main.tsx
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import App from "./App";
import { store, persistor } from './store/Store';

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

redux-persist는 사용법 또한 redux와 동일하다. redux 사용해보기 포스팅 참고