React에서 redux-persist 사용법

복준우·2022년 11월 1일
0

redux-persist 사용법 알아보기

공부하게 된 이유..

TripLog 프로젝트를 진행하면서 로그인 처리를 redux로 처리하였기 때문에 페이지를 새로고침 할 때 store의 state가 날아가 로그인이 풀리기 때문에 이에 대응하기 위해 localStorage 또는 session에 저장을 하기 위해서 이다.
로그인정보를 계속 저장하지 않고 페이지를 나가게 되면 삭제가 되는 session을 이용한 방법이다.

1. redux-persist 설치

npm install redux-persist

2. store에 persist store 정의

localStorage에 저장

import storage from 'redux-persist/lib/storage

session Storage에 저장

import storageSession from 'redux-persist/lib/storage/session

localStorage 와 session Storage 란?

브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.
이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우)
심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있는다.

쿠키를 사용하지 않고 다른 객체를 사용해 데이터를 저장하는 이유

  • 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해주며 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
  • 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
  • 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다

React 코드

  • index.js
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import reportWebVitals from './reportWebVitals';
    import rootReducer from './store';
    import { Provider } from 'react-redux';
    import { configureStore } from '@reduxjs/toolkit';
    1. import { persistStore } from "redux-persist";
    2. import { PersistGate } from "redux-persist/integration/react";
    import App from './App';
    
    const store = configureStore({ reducer: rootReducer });
    3. const persistor = persistStore(store);
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <BrowserRouter>
        <Provider store={store}>
    	    4. <PersistGate loading={null} persistor={persistor}>
    	      <App />
    	    </PersistGate>
        </Provider>
      </BrowserRouter>
    );
    
    reportWebVitals();
  • src/store/index.js

persistConfig를 적용하기 앞서 저장하고자 하는 내역에 대해 설정할 수 있다
key, storage, whitelist, blacklist 등이 존재하며
key(스토리지에서 사용되는 키 명칭), storage(localStorage, sessionStorage)는 필수 값
나머지는 선택에 따라서 입력한다.

import { combineReducers } from 'redux';
1. import { persistReducer } from "redux-persist";
2. import storageSession from 'redux-persist/lib/storage/session';

import users from './modules/users';

3. const persistConfig = {
  key: "user",
  storage: storageSession, // 또는 storage: storage
  whitelist: ["users"] // -> 이것만 사용
  // blacklist -> 그것만 제외합니다
};

export const rootReducer = combineReducers({
  users,
});

4. export default persistReducer(persistConfig, rootReducer);

여기까지가 redux-persist을 사용하기 위한 방법이였다.
하지만 해당 코드를 적용 후 콘솔창에서 아래와 같은 오류가 발생되었다.

3. 오류에 관하여

해당 블로그에서 (https://guiyomi.tistory.com/116)

오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다.
여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify)
역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse)
Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것이다.

위와 같이 설명하고 있었다.

4. 해결하기

  • 미들웨어를 추가해 해결하는 방법

    // 해당 코드를 아래의 코드로 변경해준다
    const store = configureStore({ reducer: rootReducer });
    
    // 변경코드
    import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
    
    const store = configureStore({
      reducer: rootReducer,
      middleware: getDefaultMiddleware({
        serializableCheck: false,
      }),
    });

    여기서 문제점이 하나 더 발생을 했다.
    vscode에서 코드에 취소선이 생성되어 "사용을 권장하지 않는다" 라고 알려준다.

  • 공식문서에서의 가이드(https://redux-toolkit.js.org/api/getDefaultMiddleware)
    const store = configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
    })
  • redux를 사용할 때 실행 전과 후를 알려주는 라이브러리 설치가 필요하다.
    npm install logger
  • logger를 사용해 편리하게 사용이 가능하다.

5. 마무리

단순히 로컬스토리지를 사용하기 위해 시작했지만 공부를 하다보니 쿠키와의 차이점도 배울 수 있었으며 처음에는 발생한 오류에 대해 공식문서를 살펴보는 습관이 더욱 중요하다는 걸 알게되었다.
마지막으로
localStoragesessionStorage 의 차이점을 정리해 보고 필요한 요소에 사용 할 수 있도록 해야겠다.

localStorage

  • 브라우저를 닫고 새로 열어도 지속 된다
  • 탭을 여러개 열어도 사용이 가능하다

session Storage

  • 브라우저 세션 동안만 데이터를 저장할 수 있다
  • 브라우저를 닫게 되면 삭제된다

공통

  • 새로고침이 발생해도 사용이 가능하다
profile
사람들에게 하나의 문화를 선물해줄 수 있는 프로그램을 개발하고 싶습니다.

0개의 댓글