개요

Redux는 JavaScript 애플리케이션의 상태 관리를 도와주는 라이브러리이고, 로컬 스토리지는 데이터를 브라우저에 저장하는 데 사용되는 웹 API입니다. Redux와 로컬 스토리지를 연동하면 애플리케이션의 상태를 영구적으로 저장하고 복원할 수 있습니다. 이 글에서는 Redux와 로컬 스토리지를 연동하는 방법에 대해 알아보겠습니다.

Redux의 상태를 로컬 스토리지에 저장하기

Redux 상태를 로컬 스토리지에 저장하기 위해서는 Redux의 미들웨어를 사용해야 합니다. Redux 미들웨어는 액션이 디스패치될 때마다 추가적인 작업을 수행할 수 있도록 도와줍니다. Redux Persist라는 라이브러리를 사용하면 Redux 상태를 로컬 스토리지에 저장하는 작업을 간단하게 처리할 수 있습니다.

먼저, Redux Persist 패키지를 설치해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다:

npm install redux-persist

설치가 완료되면 Redux 스토어를 생성하고 Redux Persist를 설정해야 합니다. 아래는 Redux Persist를 설정하는 예시입니다:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 로컬 스토리지 사용

import rootReducer from './reducers';

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

위의 예시에서 persistConfig 객체는 Redux Persist에 대한 설정을 담고 있습니다. key 속성은 이름을 지정하는 것이며, storage 속성은 로컬 스토리지를 사용한다는 것을 명시합니다.

Redux 스토어를 생성하고 설정을 완료한 후에는 Redux 상태를 로컬 스토리지에 저장하는 작업을 수행해야 합니다. 이 작업은 Redux Persist의 persistStore 함수를 사용하여 수행할 수 있습니다. 아래는 Redux 상태를 로컬 스토리지에 저장하는 예시입니다:

import { persistor } from './store';

persistor.persist(); // Redux 상태를 로컬 스토리지에 저장

로컬 스토리지에 저장된 데이터를 Redux 상태로 복원하기

로컬 스토리지에 저장된 데이터를 Redux 상태로 복원하기 위해서는 Redux Persist의 persistStore 함수를 사용해야 합니다. persistStore 함수는 복원된 상태를 리턴하므로 이를 Redux 스토어의 초기 상태로 설정할 수 있습니다. 아래는 로컬 스토리지에 저장된 데이터를 Redux 상태로 복원하는 예시입니다:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 로컬 스토리지 사용

import rootReducer from './reducers';

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);

persistStore(store).then(() => {
  const initialState = store.getState(); // 복원된 상태
  // 상태를 이용한 초기화 작업
});

위의 예시에서 persistStore 함수를 사용하여 Redux 스토어를 초기화하고, store.getState()를 사용하여 복원된 상태를 얻을 수 있습니다. 이후에는 얻은 상태를 이용하여 초기화 작업을 수행할 수 있습니다.

결론

Redux와 로컬 스토리지를 연동하여 상태를 영구적으로 저장하고 복원하는 방법에 대해 알아보았습니다. Redux Persist를 사용하면 간단하게 Redux 상태를 로컬 스토리지에 저장하고 복원할 수 있습니다. 이를 통해 사용자의 데이터를 보존하고 새로고침이나 재부팅에 상관없이 애플리케이션의 상태를 지속적으로 유지할 수 있게 됩니다.