[react] 리액트 네이티브에서의 리덕스 상태 저장 및 복원

22 Dec 2023

react

리액트 네이티브 앱을 개발하다보면 유저가 앱을 종료하거나 다시 실행할 때, 앱의 이전 상태를 복원해야 하는 경우가 있습니다. 리액트 네이티브에서 리덕스를 사용하여 앱 상태를 관리하고, 이 상태를 저장하고 복원하는 방법에 대해 다루고자 합니다.

1. redux-persist 패키지 설치

먼저, redux-persist 패키지를 설치합니다. 이 패키지는 리덕스 스토어의 상태를 지속적으로 저장하고 관리할 수 있도록 도와줍니다.

npm install redux-persist

2. redux-persist 설정

리액트 네이티브에서 redux-persist를 설정합니다. 아래는 간단한 redux-persist 설정 예제입니다.

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import rootReducer from './reducers';

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

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

위 코드에서, persistStore 함수를 사용하여 스토어를 생성하고, persistReducer를 이용해 persistConfig를 적용합니다.

3. redux-persist와 네비게이션

리액트 네이티브 앱에서 네비게이션을 사용한다면, 네비게이션 스택을 감싸는 고차 컴포넌트를 생성하여 redux-persist와 통합할 수 있습니다.

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

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

위 코드에서, PersistGate 컴포넌트를 사용하여 리덕스 상태가 복원될 때까지 로딩 화면을 보여줄 수 있습니다.

결론

이제, 리액트 네이티브 앱에서 리덕스 상태를 저장하고 복원하는 방법에 대해 알아보았습니다. 이를 통해 앱이 종료되거나 다시 실행될 때, 유저의 앱 상태를 지속적으로 유지할 수 있게 되었습니다.

참고 문헌:

Redux Persist: https://github.com/rt2zz/redux-persist