redux-persist로 로그인 유지 구현

 

새로고침 했을 시 로그인이 풀리는 현상을 방지하기 위해서 Localstorage에 로그인 정보를 저장할 필요성이 생겼다.

마침 상태 관리를 위해서 redux를 사용하고 있는 중이었고

redux-persist를 이용하면 로컬스토리지를 활용한 로그인 유지를 간편하게 구현할 수 있다는 사실을 알게 되었으니 바로 도입!

 

 

 

하기 전에,

 

Web Storage에 대한 개념부터 이해하고 도입을 해야 겠쥬?

 

 Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로,

영구저장소 LocalStorage와 임시저장소 SessionStorage를 가지고 있다.

쿠키와 비슷하지만 개수와 용량의 제한이 없고,쿠키처럼 매번 서버로 전송하지 않아 네트워크 트래픽 비용을 줄여준다. 

 

조금 더 상세하게 표로 정리해 보자면

Web Storage	LocalStorage	영구저장소 자동로그인을 원하면 localStorage를 사용 오리진(domain/port/protocol)이 같은 경우 데이터는 모든 탭과 창에서 공유됨 오리진만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있음 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않음
	SessionStorage	임시저장소 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 현재 떠 있는 탭 내에서만 유지 같은 페이지여도 탭이 다르면 다른 곳에 저장 하나의 탭에 여러 iframe이 떠 있는 경우 동일 오리진에서 왔다고 취급하여 sessionStorage 공유됨 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않습니다. 하지만 탭을 닫고 새로 열 때는 사라짐

 

---

 

자 이제 본격적으로 도입을 하기 위해서 redux-persist 패키지를 설치한다.

 

npm i redux-persist

 

리덕스 스토어를 정의한 파일에서 다음과 같이 import 한다.

import { configureStore, combineReducers } from '@reduxjs/toolkit';
// import logger from 'redux-logger';
import rootReducer from '../reducer';
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: ['authReducer']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

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

export const persistor = persistStore(store);

 

 

그리고 클라이언트의 루트 폴더인 index.js에서 다음과 같이 import 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { store } from './store/index';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist'; // 여기가 redux-persist 를 적용하기 위한 코드
import { PersistGate } from 'redux-persist/integration/react'; // 여기가 redux-persist 를 적용하기 위한 코드
 
const persistor = persistStore(store); // 여기가 redux-persist 를 적용하기 위한 코드
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}> {/* 여기가 redux-persist 를 적용하기 위한 코드 */}
        <App />
      </PersistGate> {/* 여기가 redux-persist 를 적용하기 위한 코드 */}
    </Provider>
  </React.StrictMode>
);

 

 

 

참고자료

https://11001.tistory.com/191

https://backend-intro.vlpt.us/6/06.html

https://coding-restaurant.tistory.com/294