redux-persist

redux-persist는 리덕스 상태를 유지하고, 새로고침이나 브라우저를 닫았다 열었을 때에도 유지할 수 있게 해주는 라이브러리입니다.

일반적으로 리덕스는 브라우저를 새로고침하거나, 브라우저를 닫았다 다시 열었을 때 리덕스 스토어의 상태가 초기화되어, 사용자의 입력값이나 환경 설정 등이 유지되지 않습니다. 그러나 redux-persist는 이를 해결하기 위해 리덕스의 상태를 자동으로 브라우저의 로컬 스토리지 또는 세션 스토리지에 저장하고, 브라우저가 닫혔다 다시 열리면 저장된 상태를 불러와 리덕스 스토어에 적용시켜주는 역할을 합니다.

redux-persist는 redux와 함께 사용되며, 구현 방법은 간단합니다. 먼저, redux-persist의 persistReducer 함수를 사용하여 리듀서를 감싸줍니다. 그리고 persistStore 함수를 사용하여 스토어를 저장하고 불러올 수 있게 설정합니다.

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);

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

export { store, persistor };

위 코드에서 persistConfig 객체는 key와 storage 속성을 가지고 있습니다. key는 저장되는 데이터의 이름을 정하는 것이며, storage는 저장 방식을 결정합니다. 로컬 스토리지를 사용할 경우 redux-persist/lib/storage 모듈에서 default 값을 가져와 사용합니다.

persistReducer 함수는 persistConfig와 리듀서를 인자로 받아서 새로운 리듀서를 반환합니다.

마지막으로 persistStore 함수는 스토어를 저장하고, 불러올 수 있게 설정하는 함수입니다. 이 함수는 persistor 객체를 반환하는데, 이 객체는 store 객체와 함께 사용됩니다.

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import { store, persistor } from './store';

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* 어플리케이션 코드 */}
      </PersistGate>
    </Provider>
  );
}

PersistGate 컴포넌트는 redux-persist에서 제공하는 리덕스 스토어의 상태를 저장하고 복원하기 위해 사용됩니다.

PersistGate는 redux-persist의 persistor 객체를 전달받아서 리덕스 스토어가 초기화되기 전까지 렌더링을 지연시킵니다. 이 때, persistor 객체는 리덕스 스토어의 상태를 지속적으로 저장하고, 다시 복원하기 위한 역할을 합니다.

PersistGate 컴포넌트가 렌더링되면, persistor 객체가 리덕스 스토어의 상태를 복원하는데 필요한 비동기 작업을 수행합니다. 이 작업은 persistor 객체가 지정한 저장소 (예: 웹 브라우저의 로컬 스토리지)에서 상태를 불러오는 것입니다. 상태가 복원되면 PersistGate는 자식 컴포넌트를 렌더링합니다. 이를 통해 사용자는 초기 로딩시 빈 화면이 보이는 것을 방지할 수 있습니다.

따라서, PersistGate 컴포넌트를 사용하여 리덕스 스토어의 상태를 지속적으로 저장하고 복원함으로써, 사용자가 새로고침을 해도 애플리케이션의 상태를 유지할 수 있습니다.

정리

redux-persist는 리덕스 상태를 유지하고, 새로고침이나 브라우저를 닫았다 열었을 때에도 유지할 수 있게 해주는 라이브러리이다.

persistConfig는 key와 storage 속성을 가지고 있다.
key는 저장되는 데이터의 이름을 정하는 것이며, storage는 저장 방식을 결정한다.