React-persist가 필요했던 이유

이번 프로젝트에서 상태관리는 Redux를 이용했다. 내가 맡은 부분 중 전역 상태관리가 필요한 것은 아래 두 가지였다.

1. 모달
2. 로그인 유저 정보 저장

모달은 모든 페이지에서 사용 가능하도록 modalReducer를 만들고 리덕스 스토어에 저장하여 상태관리를 했다. 문제는 로그인 유저 정보를 저장할 때 있었다.

처음에 유저 정보를 저장할 때, 유저가 로그인하면 해당 유저 데이터를 리덕스 스토어에 저장하여 사용했는데 유저 데이터가 가끔 빈 값이 들어올 때가 있었다. 임시방편으로 유저 데이터를 사용해야하는 부분에서 api 요청을 한번 더 보내는 코드를 작성했던 기억이 난다.

‘네트워크 문제인가?’ 하고 넘어 갔었는데 리덕스의 스토어는 새로고침 할 경우 state가 날아간다는 사실을 뒤 늦게 알게 되었다. 그래서 마우스 클릭으로 앱에서 화면 전환을 할 경우 리덕스는 유저 데이터를 가지고 있었고 뒤로가기 혹은 새로고침을 할 경우, 유저 데이터가 들어오지 않는 것이었다.

이를 해결하기 위해서는 react-persist라는 라이브러리를 적용하면 된다. 이는 reducer state를 로컬 스토리지나 세션 스토리지에 저장하여 새로고침 해도 저장공간에 있는 데이터를 redux에 불러오는 방식으로 이루어진다고 한다. 아래와 같이 작성하니 로컬스토리지에 persist 데이터가 저장되어 있는 것을 확인할 수 있었다.

reducer에 persist store 정의

reducer/store.ts

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { modalReducer } from './ModalReducer';
import { loginCheckReducer } from './LoginCheckReducer';

import storage from 'redux-persist/lib/storage';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['loginCheckReducer'],
};

export const rootReducer = combineReducers({
  loginCheckReducer,
  modalReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

persist store 적용

index.ts

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './reducers';

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

---

참고링크
npm react-persist