redux-persist로 redux 상태 영구 저장하기

react를 공부하면서 컴포넌트를 잘게 나눌수록 props를 통해 값을 전달하는게 상태관리하기도 힘들고 매우몹시정말아주 귀찮았다.

그래서 해결책을 찾아보다 redux에 대해 알게되었고 사용해봤는데, 브라우저를 새로 불러올때마다 값이 전부 사라지길래 뭐지 싶었다.

그러다 또 알게된 것 redux-persist...! 그래서 오늘은 redux-persist에 대해 알아볼 예정이다.

Redux Persist란 무엇인가?

Redux Persist는 Redux를 사용하는 애플리케이션에서 상태를 영구적으로 저장하고 관리하기 위한 라이브러리이다. Redux는 애플리케이션의 상태를 중앙 집중식으로 관리하는 패턴을 제공하지만, 상태는 일시적인 메모리에 저장되기 때문에 새로고침이나 페이지 이동과 같은 상황에서 상태가 초기화된다. Redux Persist는 이러한 문제를 해결하기 위해 Redux의 상태를 지속적으로 저장하고 불러오는 기능을 제공한다.

왜 Redux Persist를 사용하는가?

1. 지속적 사용자 경험(Persistent User Experience):

Redux Persist를 사용하면 사용자가 애플리케이션을 종료하고 다시 열어도 이전 상태를 복원하여 지속적인 사용자 경험을 제공할 수 있다. 이는 사용자가 중간에 데이터를 잃어버리는 것을 방지하고, 애플리케이션의 사용성과 편의성을 높인다.

2. 데이터 보존(Data Persistence):

애플리케이션에서 로그인 상태, 사용자 설정, 테마 등과 같은 데이터를 영구적으로 보존해야 할 때 Redux Persist를 사용하여 이 데이터를 로컬 스토리지 또는 세션 스토리지에 저장할 수 있다.

3. 네트워크 비용 감소:

Redux Persist를 사용하면 사용자가 애플리케이션을 재로드할 때 초기 상태를 다시 불러오는 대신 이전 상태를 로컬 스토리지에서 빠르게 불러와 네트워크 비용을 절약할 수 있다.

Redux Persist를 사용하게 된 배경

Redux Persist는 Redux를 사용하는 애플리케이션에서 상태를 영구적으로 저장하기 위한 간편한 방법을 제공하기 위해 만들어졌다. Redux를 사용하는 경우 상태의 초기화 문제가 발생할 수 있기 때문에 Redux Persist를 사용하여 이를 해결하고자 했다. 또한 사용자 경험을 개선하고 데이터 보존을 간편하게 처리하기 위해 Redux Persist가 도입되었다.

Redux Persist의 이점과 단점

이점:

1. 영구적 상태 보존:

Redux Persist를 사용하면 상태를 영구적으로 저장하여 사용자가 애플리케이션을 종료하고 다시 열어도 이전 상태를 복원할 수 있다.

2. 간편한 설정:

Redux Persist는 간단한 설정만으로 쉽게 도입할 수 있으며, 여러 저장소를 지원하여 선택적으로 사용할 수 있다.

3. 사용자 경험 개선:

초기 로딩 시간을 단축하여 사용자 경험을 향상시킨다.

단점:

1. 로컬 스토리지 제한:

로컬 스토리지에 저장하는 경우 사용 가능한 공간에 제한이 있을 수 있다.

2. 보안 고려 사항:

Redux Persist를 사용하여 중요한 정보를 로컬 스토리지에 저장하는 경우 보안 취약점이 발생할 수 있으므로 보안을 고려해야 한다.

Redux Persist 코드 작성 방법

Redux Persist를 사용하기 위해서는 먼저 redux-persist 라이브러리를 설치해야 한다.

npm install redux-persist

그리고 Redux 스토어를 구성할 때, persistReducer와 persistStore를 사용하여 영구 저장을 적용한다.

// store.js

import { configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage"; // localStorage를 사용하려면 이렇게 임포트

import rootReducer from "./rootReducer"; // rootReducer를 import 하도록 수정

// Redux Persist 구성 객체
const persistConfig = {
  key: "root", // 스토리지에 저장될 키값
  storage, // 사용할 스토리지 (localStorage, sessionStorage 등)
  whitelist: ["auth"], // auth Reducer만 저장
};

// Redux Persist가 적용된 rootReducer 생성
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Redux 스토어 생성
export const store = configureStore({
  reducer: persistedReducer, // Redux Persist가 적용된 rootReducer를 사용
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // serializable한지 체크하지 않음 (향후 경고 메시지를 피하기 위함)
    }),
});

// Redux Persist 스토어 생성
export const persistor = persistStore(store);

export default store;

위의 코드에서 persistConfig 객체에서 key는 스토리지에 저장될 키값을 의미하며, storage는 사용할 스토리지 종류를 지정한다. 이후 persistReducer를 사용하여 rootReducer를 영구 저장이 적용된 버전으로 감싸주고, persistStore를 사용하여 Redux 스토어에 영구 저장을 적용한다.

이제 Redux Persist를 통해 상태가 영구적으로 저장되고 불러오는 기능이 적용된 Redux 스토어를 사용하여 애플리케이션을 개발할 수 있다.

정리

redux-persist를 이용하면 데이터를 영구히 저장할 수 있게 해준다길래, vuex같은건 줄 알았는데 그냥 로컬스토리지에 자동으로 저장시켜줘서 정말 상태 '관리'만 편하게 도와주는 느낌이다. 그래서 jwt를 활용해 로그인을할때 사용해도 되나 싶었는데 되는거같기도 하고 안되는거 같기도 하고.... 아는게 많이 없어서 잘모르겠다... 고수님을 붙잡고 묻고 싶은데 주변에 도움받을 사람이 한명도 없다....
하지만 어쨌든! 상태관리를 유용하게하는데 도움을 주는건 확실하다!. 이외에도 유효기간 설정, 설정 가능한 저장소 유형, 저장되는 상태 선택, 암호화등 다양한 기능을 지원한다고 한다.
더 공부해서 잘 활용해야겠다.

설명도 이상하고 코드도 이상한 글임에도 읽어주셔서 감사합니다. : )