[React] 새로고침에도 데이터 유지되는 Redux-Persist 예제

 

오늘은 이전에 적용한 store의 데이터가 새로고침(F5)을 하면 데이터가 소실되는 것을 방지하기 위해 사용한 redux-persist 라이브러리 적용 예제를 준비해봤다.

 

1. 설치

 

npm install redux-persist

 

 

2. store 소스 수정

 store/index.ts

// store/index.ts

import { configureStore } from '@reduxjs/toolkit';
import tokenReducer from './Auth';

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'root',
    storage,
};

const persistedReducer = persistReducer(persistConfig, tokenReducer);

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

export type RootState = ReturnType<typeof store.getState>;
export default store;

 

 index.tsx

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {CookiesProvider} from "react-cookie";
import {Provider} from "react-redux";
import store from "./store";
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';

let Persistor = persistStore(store);

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 - 최상단의 index.tsx도 다음과 같이 수정해야 한다.

 

마무리

store에서 관리하는 데이터가 새로고침 등으로 유실되지 않도록 처리하는 방법에 대해서 알아보았다. 필자의 경우 로그인과 관련된 토큰 정보를 store에서 관리하는데 테스트 중에 자꾸 유실되어서 원인을 찾다가 발견하게 되었다. 결국 데이터는 어디에 저장되고 얼마나 메모리에 유지되는지를 항상 염두에 두어야 함을 또 한번 느꼈다!