[javascript] Redux와 상태 지속성(Persistence) 방법은?

22 Nov 2023

javascript

Local Storage 사용하기: Local Storage는 브라우저에서 제공하는 접근 가능한 저장 공간입니다. Redux 상태를 Local Storage에 저장하여 애플리케이션을 재로딩 할 때마다 이를 복원할 수 있습니다. Redux 상태를 Local Storage에 저장하기 위해 redux-persist 라이브러리를 사용할 수도 있습니다.

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Local Storage 사용

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

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

Session Storage 사용하기: Session Storage는 브라우저 세션 동안만 지속되는 저장 공간입니다. Local Storage와 마찬가지로 Redux 상태를 Session Storage에 저장하여 애플리케이션을 재로딩 할 때마다 복원할 수 있습니다. Redux 상태를 Session Storage에 저장하기 위해서도 redux-persist 라이브러리를 사용할 수 있습니다.

import { persistStore, persistReducer } from 'redux-persist';
import storageSession from 'redux-persist/lib/storage/session'; // Session Storage 사용

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

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

쿠키(Cookie) 사용하기: 쿠키는 서버와 클라이언트 간의 작은 데이터 조각을 저장하는데 사용되는 저장 공간입니다. Redux 상태를 쿠키에 저장하여 애플리케이션을 재로딩 할 때마다 이를 복원할 수 있습니다. js-cookie 라이브러리를 사용하여 Redux 상태를 쿠키에 저장할 수 있습니다.

import Cookies from 'js-cookie';

const persistedState = Cookies.get('reduxState');
const store = createStore(rootReducer, persistedState);

store.subscribe(() => {
  Cookies.set('reduxState', JSON.stringify(store.getState()));
});

이렇게 Redux 상태의 지속성을 유지하는 방법으로 애플리케이션의 상태를 저장하고 복원할 수 있습니다. 추가적으로 Redux Persist 라이브러리를 사용하면 더욱 간편하게 상태 지속성을 구현할 수 있습니다. 참고로 Redux Persist는 Local Storage, Session Storage, IndexedDB 등 다양한 저장소를 지원합니다.

참고 문서:

Redux Persist: https://github.com/rt2zz/redux-persist
js-cookie: https://github.com/js-cookie/js-cookie