Redux와 세션 스토리지(Session Storage)의 연동 방법

Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 예측 가능한 상태 컨테이너입니다. 세션 스토리지는 웹 브라우저에서 제공하는 클라이언트 사이드 데이터 저장소입니다. Redux와 세션 스토리지를 연동하여 상태를 영구적으로 저장하고 복원할 수 있습니다.

세션 스토리지 헬퍼 함수 작성

Redux와 세션스토리지를 연동하기 위해 먼저 세션 스토리지를 다룰 수 있는 헬퍼 함수를 작성해야 합니다. 아래는 세션 스토리지에 데이터를 저장하고 가져오는 기능을 제공하는 간단한 헬퍼 함수의 예입니다.

// 세션 스토리지 헬퍼 함수
const sessionStorageHelper = {
  save: (key, value) => {
    sessionStorage.setItem(key, JSON.stringify(value));
  },
  retrieve: (key) => {
    const value = sessionStorage.getItem(key);
    return JSON.parse(value);
  }
};

위의 코드에서 save 함수는 주어진 키와 값을 JSON 형태로 세션 스토리지에 저장합니다. retrieve 함수는 주어진 키에 해당하는 값을 세션 스토리지에서 가져온 후 JSON 형태로 변환하여 반환합니다.

Redux 상태 저장하기

Redux 상태를 세션 스토리지에 저장하는 방법은 Redux의 미들웨어를 사용하는 것입니다. redux-persist라는 라이브러리는 Redux 상태를 영구적으로 저장할 수 있는 기능을 제공합니다. 이 라이브러리를 사용하여 Redux 상태를 세션 스토리지에 저장하는 예제를 살펴보겠습니다.

redux-persist 라이브러리를 설치합니다.

npm install redux-persist

Redux 스토어를 생성하고 redux-persist를 설정합니다.

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage/session';

// 영구 저장을 위한 Redux 향상 설정
const persistConfig = {
  key: 'root',
  storage
};

// Redux 향상 설정을 가진 리듀서 생성
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Redux 스토어 생성
const store = createStore(persistedReducer, applyMiddleware(...middlewares));

// Redux 스토어를 세션 스토리지에 저장
persistStore(store);

위의 코드에서 persistConfig 객체는 redux-persist의 설정을 정의합니다. 키 값은 저장소에 저장되는 데이터의 키입니다. storage는 session을 사용하여 세션 스토리지에 데이터를 저장하겠다는 의미입니다. persistReducer 함수는 주어진 설정을 가진 리듀서를 생성합니다. 그리고 persistStore 함수는 Redux 스토어를 세션 스토리지에 저장합니다.

Redux 상태 복원하기

Redux 상태를 세션 스토리지에서 복원하는 방법은 Redux 스토어를 생성할 때 persistedReducer를 사용하는 것입니다. 이렇게 하면 Redux 스토어가 초기화될 때 세션 스토리지에 저장된 데이터가 자동으로 복원됩니다.

// Redux 스토어를 세션 스토리지에서 복원
const store = createStore(persistedReducer, applyMiddleware(...middlewares));

위의 코드에서 createStore 함수의 첫 번째 인자로 persistedReducer를 전달하여 Redux 스토어를 생성합니다. 이렇게 하면 세션 스토리지의 데이터가 자동으로 불러와지고 Redux 상태로 복원됩니다.

결론

Redux와 세션 스토리지를 연동하여 상태를 영구적으로 저장하고 복원하는 방법에 대해 알아보았습니다. 세션 스토리지 헬퍼 함수를 작성하고, redux-persist를 사용하여 Redux 상태를 세션 스토리지에 저장하고 복원할 수 있습니다. 이를 통해 애플리케이션의 상태를 보다 영구적으로 관리할 수 있습니다.