1. redux-persist ?

데이터를 '로컬 스토리지' 또는 '세션 스토리지'에 저장하여 데이터를 유지시켜주는 패키지이다.

React 또는 React Native에서 가장 중요한 것 중에 하나는 바로 상태관리라고 해도 과언이 아니다.

하지만, 앱을 껐다 키거나 혹은 새로고침에 의해서 해당 페이지에 저장되어 있던 상태들이 모두 초기화 되는 것이 일반적이다.

이로 인해 데이터를 재가공 해야하는 수고로움과 불필요한 시간, 비용 등이 발생할 수 있으며 심지어 에러도 고려해야 한다.

이를 위해 redux-persist 라이브러리는 필요한 데이터를 로컬 스토리지 혹은 세션 스토리지에 저장하여 데이터를 유지시켜준다.

2. 로컬 스토리지 ? 세션 스토리지 ?

웹 브라우저 또는 모바일 디바이스에서 클라이언트 측에 데이터를 저장하는 데 사용되는 스토리지 기술이다.

각 스토리지 별 특징은 다음과 같다.

1) 로컬 스토리지

• 데이터 수명: 사용자가 명시적으로 삭제하지 않는 한 영구적으로 유지된다.
• 공유 범위: 도메인 혹은 모든 컴포넌트에서 공유 가능하다.

2) 세션 스토리지

• 데이터 수명: 브라우저 또는 앱의 세션이 유지되는 동안 유지된다. 즉, 사용자가 브라우저나 혹은 앱을 종료하면 데이터가 삭제된다.
• 공유 범위: 동일한 세션을 공유하는 동안에만 접근 가능하다. 브라우저 환경에선 탭 간에 독립적으로 관리되며 다른 탭에서는 해당 세션을 접근할 수 없다.

3. 구현

store 와 persist 를 구현하는 store/index.ts 파일과 이를 import 하여 전체 root에 적용하는 root.tsx 파일을 나눠서 구현하였다.

store/index.ts

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import createMigrate from 'redux-persist/es/createMigrate';

const rootReducer = combineReducers({
  firstReducer,
  secondReducer,
  thirdReducer,
});

const persistConfig = {
  key: 'whkwon',
  version: 1,
  storage: AsyncStorage,
  whitelist: ['firstReducer', 'secondReducer'],
  blacklist: ['thirdReducer'],
  migrate: createMigrate(migrations),
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: [],
});

const persistor = persistStore(store);

• persistStore : 정의된 store 내용에 따라 리덕스 데이터를 유지시킬 수 있는 리덕스 스토어를 생성하고, 이를 persistor 변수에 대입한다.
• persisReducer : redux-persist 와 리덕스 모듈 정보를 종합하여 persist 정보를 반환한다.
• key : 스토리지에 저장할 때 필요한 키값을 저장한다.
• storage : 저장할 스토리지를 지정한다. 보통 redux-persist 에서 제공하는 로컬 스토리지나 세션 스토리지를 사용해도 되지만, 본인은 다른 라이브러리인 @react-native-async-storage 를 사용하였다.
• whitelist : 스토리지에 저장 할 리덕스 모듈을 나열한다.
• blacklist : 스토리지에 저장하지 않을 리덕스 모듈을 나열한다.
• migrate : 다음 버전에서 reducer의 초기값을 생성하고자 할 때 사용한다. 예를 들면, 어떠한 기능을 추가했는데 whkwon 이라는 state의 키값이 필요하다면 migration 파일에 따로 작성하여 이 메소드에 적용하면 된다. 본인은 redux-persist 에서 제공하는 createMigrate 메소드를 사용하였다.

root.tsx

export const Root = () => {

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor} loading={null}>
        <App />
      </PersistGate>
    </Provider>
  );
};

• PersistGate : 리덕스 스토어에 유지시키고자 하는 데이터들이 UI가 렌더되기 전에 정상적으로 저장되고 불러올 수 있도록 UI의 렌더링을 잠시 지연시키는 역할을 한다.
• persistor : store/index.ts 파일에서 스토어 내용이 정의된 변수를 대입한다.
• loading : UI를 얼마나 렌더링을 지연시킬 것인지에 대한 시간을 나타낸다.null을 허용하며 단위는 ms 이다. 즉, 1000을 대입하면 약 1초간 지연된다는 이야기이다.