AsyncStorage로 앱이 꺼져도 데이터 유지하기

AsyncStorage란?

AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소다.
iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드에서는 네이티브 코드와 SQLite를 기반으로 구현되어 있다.
AsyncStorage는 브라우저에서 사용하는 localStrorage와도 비슷하다. 값을 저장할 때는 문자열 타입으로 저장해야 하며, getItem, setItem, removeItem, clear 등 localStorage에서 사용하는 메서드와 같은 이름을 가진 메서드들도 존재한다.
localStorage와의 큰 차이점이라면 AsyncStorage는 비동기적으로 작동한다는 것이다. 값을 조회하거나 설정할 때 Promise를 반환한다.

Promise와 동기, 비동기의 개념은 이 전 블로그 글을 참고 바란다.

 

더 많은 API에 관한 정보는 아래에서 확인할 수 있다.

Installation | Async Storage

 

AsyncStorage의 기본 사용법

설치하기

아래 명령어를 사용해 라이브러리를 설치한다.

$ yarn add @react-native-community/async-storage

설치가 다 되었다면 iOS에서는 pod install 명령어를 실행해야 하고 iOS, 안드로이드를 다시 로드한다.

$ cd ios
$ pod install
$ cd ..
$ yarn ios # iOS load
$ yarn android # 안드로이드 load

Import

AsyncStorage는 @react-native-community/async-storage에서 불러올 수 있다.

import AsyncStorage from '@react-native-community/async-storage';

저장하기

특정 값을 저장할 때는 setItem 메서드를 사용한다.

const save = async () => {
  try {
    await AsyncStorage.setItem('key', 'value');
    await AsyncStorage.setItem('info', JSON.stringify(info)); // 객체 형태 저장
  } catch (e) {
  	// 오류 예외 처리
  }
}

값을 저장할 때는 문자열 타입이어야 한다. 만약 객체 및 배열 타입을 저장하려면 JSON.stringify 함수를 사용해야 한다.

불러오기

특정 값을 불러올 때는 getItem 메서드를 사용한다.

const load = async () => {
  try {
    const value = await AsyncStorage.getItem('key');
    const infoString = await AsyncStorage.getItem('info');
    const info = JSON.parse(infoString); // 저장된 객체 변환
    ...
  } catch (e) {
  	// 오류 예외 처리
  }
}

만약 JSON.stringify를 사용해서 객체를 문자열로 저장했다면, 불러올 때는 JSON.parse로 변환해야 한다.

초기화하기

AsyncStorage에 있는 모든 값을 초기화하고 싶다면 다음과 같이 clear 메서드를 사용한다.

const clearAll = asycn () => {
  try {
    await AsyncStorage.clear();
  } catch (e) {
   // 오류 예외 처리
  }
}

 

AsyncStorage를 사용하는 코드 추상화시키기

리액트 네이티브 프로젝트에서 AsyncStorage를 사용할 때는 방금 사용한 것처럼 직접 사용하지 않고 코드를 한번 추상화시켜서 사용할 것을 권장한다. 그 이유는 추후 key 값이 바뀔 수도 있고, AsyncStorage가 아닌 다른 박식을 통해 데이터를 저장할 수도 있는데 이러한 상황에서 유지보수하기가 더욱 쉬워지기 때문이다.

 

아래 예제 코드는 userDataStorage라는 객체를 만들어 내부에 AsyncStorage에 저장된 데이터를 불러오는 get, AsyncStorage에 데이터를 저장하는 set 메서드를 만들었다.

import AsyncStorage from '@react-native-community/async-storage';

const key = 'userData';

const userDataStorage = {
  async get() {
    try {
      const rawData = await AsyncStorage.getItem(key);
      if (!rawData) {
        throw new Error('No saved ' + key);
      }
      const savedData = JSON.parse(rawData);
      return savedData;
    } catch (e) {
      throw new Error('Failed to load ' + key);
    }
  },
  async set(data) {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      throw new Error('Failed to save ' + key);
    }
  },
};

export default userDataStorage;

사용할 때는 아래 코드와 같이 사용하면 된다.

const [userData, setUserData] = useState({});

userDataStorage.get(userData).then(setUserData).catch(console.error);
userDataStorage.set(userData).catch(console.error);

 

안드로이드에서 AsyncStorage 최대 용량 설정하기

AsyncStorage에 너무 많은 데이터를 넣는 것을 방지하기 위해서 안드로이드에서는 AsyncStorage의 최대 크기가 기본적으로 6MB로 설정되어 있다. 이 용량을 초과하면 오류가 발생한다.

최대 용량을 늘리려면 android/gradle.properties 파일에 아래 코드를 추가하면 된다.

AsyncStorage_db_size_in_MB=10

참고로 iOS는 최대 용량이 따로 설정되어 있지 않다.

 

AsyncStorage의 제한

AsyncStorage는 설정이 매우 간편하고 사용법도 쉽지만, 문자열 타입으로만 저장할 수 있기 때문에 AsyncStorage에서 다루는 데이터의 규모가 커지면 성능이 떨어진다. 그리고 검색 또는 정렬 기능이 지원되지 않는다.

물론 캐싱 시스템, 스로틀링(throttling), 페이지네이션 구현 등으로 성능을 최적화할 수도 있긴하지만 최적화 코드는 그렇게 간단하지 않을 것이다. 따라서 AsyncStorage는 비교적 소규모 데이터를 다룰 때 사용하는 것이 좋다.

 

데이터의 규모가 커졌을 때 사용할 수 있는 대안으로는 realm와 react-native-sqlite-storage가 있다.

안드로이드의 AsyncStorage는 이미 SQLite를 사용하기 하지만, react-native-sqlite-storage를 사용하면 인덱싱 기능을 지원받을 수 있고, 더욱 다양한 방식으로 데이터를 저장하고 조회할 수 있다.