지금부터는 실제로 redux-persist를 사용하는 방법에 대해서 배워보도록 하겠습니다.

가장 먼저 어떤 Storage에 데이터를 저장할 것인지, Storage Engine을 선택해야 합니다.
웹에서는 localStorage와 sessionStorage중에서 선택해서 사용하면 되는데, 일반적으로는 localStorage를 가장 많이 사용합니다.

Storage Engine을 선택했다면, 다음으로는 redux-persist를 어떻게 사용할 것인지 설정을 세팅해야 합니다.
이 설정 객체를 보통 persistConfig라고 부르는데, persistConfig에는 대표적으로 다음과 같은 속성들이 있습니다.

• key
  • 저장할 데이터의 key
• storage
  • 사용할 Storage Engine
• version
  • 현재 저장된 State의 버전 (Migration에 사용)
• blacklist & whitelist
  • 저장에서 제외(blacklist)하거나, 저장할 타겟(whitelist) State의 key값
• transforms
  • 사용할 데이터 변환 플러그인

먼저 key는 저장할 데이터의 key를 의미합니다.

그리고 storage는 사용할 Storage Engine을 지정하는 속성입니다.
앞에서 선택한 localStorage 또는 sessionStorage를 여기에 넣으면 됩니다.

그리고 version은 현재 저장된 State의 버전을 의미하는데, 개발하다 보면 이미 배포된 이후에 State Tree의 구조가 바뀔 수 있기 때문에 이렇게 버전을 명시하여 향후 Migration에 사용하게 됩니다.
Migration에 대해서는 뒤에서 다시 자세히 살펴보도록 하겠습니다.

다음 속성은 blacklist & whitelist입니다.
이 속성은 저장에서 제외(blacklist)하거나, 저장할 타겟(whitelist) State의 key값을 의미합니다.
blacklist를 사용해서 전체 State Tree에서 일부 State만 저장하지 않을 수도 있고, 반대로 whitelist를 사용해서 일부 State만 저장할 수도 있습니다.

마지막으로 transforms는 앞에서 배웠던 데이터 변환 플러그인을 지정하는 속성입니다.

persistConfig에는 이외에도 다양한 속성들이 있는데, 추가적인 속성이 궁금한 분들은 아래 링크를 참고하기 바랍니다.

https://github.com/rt2zz/redux-persist/blob/master/src/types.ts

---

자, 이제 persistConfig까지 결정했다면, 다음으로는 Redux Store와 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: storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

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

export default store;

연동은 위 코드와 같이 먼저 persistConfig 객체를 만들고, 이 persistConfig와 rootReducer를 파라미터로 해서 persistReducer를 만듭니다.

이렇게 만들어진 persistedReducer는 내부 State들이 Storage를 통해 저장되고 복원되게 됩니다.
그리고 Redux의 createStore() 함수를 호출 할 때, 이 persistedReducer를 넣어주면 됩니다.

그리고 마지막 부분에 persistStore() 함수를 사용해서 persistor라는 것을 만들어서 export 하고 있습니다.
여기서 잠시 이 persistor에 대해서 조금 자세히 살펴보도록 하겠습니다.

Persistor는 Persisted Redux Store와 관련된 여러 함수들을 제공하는 객체입니다.

• purge()
  • 데이터를 모두 초기화 하는 함수
• flush()
  • 즉시 모든 state의 데이터를 저장하는 함수
• pause()
  • 데이터 저장(persist)를 일시 중단하는 함수
• persist()
  • 데이터 저장(persist)를 다시 재개하는 함수

제공 되는 함수들을 하나씩 살펴보면, 먼저 purge() 함수는 데이터를 모두 초기화 하는 함수이고, flush() 함수는 즉시 모든 state의 데이터를 저장하는 함수입니다.
그리고 pause() 함수는 데이터 저장(persist)를 일시 중단하는 함수고, persist() 함수는 데이터 저장(persist)을 다시 재개하는 함수입니다.

Persistor는 이렇게 Persisted Redux Store의 기능을 직접 호출하고 싶을 때 사용할 수 있는 객체라고 보면 됩니다.

여기까지 하면 Redux와 redux-persist의 연동은 모두 끝납니다.
하지만 React와 Redux를 함께 사용하는 경우에는, 한 가지 더 추가로 해야 할 작업이 있습니다.
바로 아래 코드처럼 최상위 컴포넌트를 PersistGate 컴포넌트로 감싸는 것입니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import store, { persistor } from './redux/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

그리고 PersistGate 컴포넌트의 props로 앞에서 만든 persistor가 들어가게 됩니다.
이렇게 하면 저장된 데이터가 로딩되어 Redux Store에 복원되기 전까지 UI 렌더링을 막을 수 있습니다.
그리고 loading prop을 사용하면, 데이터가 로딩되어 Redux Store에 복원되기 전까지 보여줄 UI를 직접 구현할 수도 있습니다.
여기에서는 데이터 로딩 전까지 화면에 아무것도 렌더링하지 않도록 하기 위해서 null로 설정해두었습니다.

PersistGate를 사용하면 데이터가 비어있는 상태에서 렌더링 되는 것을 막을 수 있기 때문에, 조금 더 깔끔한 사용자 경험을 제공할 수 있게 됩니다.