리액트 네이티브 앱을 개발할 때는 앱 상태를 관리하기 위해 리덕스를 사용하는 것이 일반적입니다. 하지만, 앱을 종료 혹은 다시 시작하는 경우 리덕스 상태가 초기화되어버리는 문제가 발생할 수 있습니다. 이를 해결하기 위해 리덕스 상태를 영속화하는 방법에 대해 알아봅시다.

AsyncStorage를 활용한 상태 영속화

AsyncStorage는 리액트 네이티브에서 로컬 데이터를 비동기적으로 저장하는 방법을 제공합니다. 이를 활용하여 리덕스 상태를 저장하고 불러올 수 있습니다.

예를 들어, 다음은 AsyncStorage를 사용하여 리덕스 상태를 영속화하는 예제 코드입니다.

import { AsyncStorage } from 'react-native';
import { createStore } from 'redux';
import rootReducer from './reducers';

const loadState = async () => {
  try {
    const serializedState = await AsyncStorage.getItem('state');
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};

const saveState = async (state) => {
  try {
    const serializedState = JSON.stringify(state);
    await AsyncStorage.setItem('state', serializedState);
  } catch (err) {
    // 저장에 실패한 경우
  }
};

const persistedState = await loadState();
const store = createStore(rootReducer, persistedState);

store.subscribe(() => {
  saveState(store.getState());
});

위 코드에서는 loadState 함수를 사용하여 이전에 저장된 상태를 불러오고, saveState 함수를 사용하여 현재 상태를 저장합니다. store.subscribe를 사용하여 상태가 변경될 때마다 AsyncStorage에 상태를 저장합니다.

Redux Persist 사용하기

또 다른 방법으로는 redux-persist 라이브러리를 사용하는 방법이 있습니다. 이 라이브러리를 사용하면 간단한 설정만으로 리덕스 상태를 영속화할 수 있습니다.

먼저, redux-persist를 설치합니다.

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

위 코드에서는 persistConfig 객체를 사용하여 어떤 저장소를 사용할지 설정하고, persistReducer 함수를 사용하여 영속화된 리듀서를 생성합니다. persistStore 함수를 사용하여 스토어를 영속화합니다.

결론

리액트 네이티브 앱에서 리덕스 상태를 영속화하는 방법에는 여러 가지가 있지만, AsyncStorage를 직접 활용하거나 redux-persist 라이브러리를 사용하는 것이 가장 일반적입니다. 앱의 요구사항과 편의성에 맞게 적절한 방법을 선택하여 상태를 영속화하는 것이 중요합니다.