AsyncStorage

개요

AsyncStorage는 React Native에서 비동기적으로 데이터를 저장하고 검색할 수 있는 간단한 키-값 저장소이다. 모바일 애플리케이션에서 로컬 데이터를 관리하는 데 유용하며, 비동기 API를 통해 데이터의 저장과 검색을 처리한다.

역사와 배경

AsyncStorage는 React Native의 초기 버전부터 제공되어 왔다. 웹의 LocalStorage와 유사한 기능을 모바일 환경에서 제공하기 위해 설계되었으며, React Native 애플리케이션에서 간단한 데이터 저장소로 널리 사용된다.

특징

비동기 처리

AsyncStorage는 모든 작업이 비동기적으로 이루어진다. 이는 데이터 저장 및 검색 시 애플리케이션의 UI 스레드가 차단되지 않도록 하여 성능을 향상시킨다.

키-값 저장소

데이터는 문자열 형태의 키와 값으로 저장된다. 이는 간단한 데이터 구조를 저장하는 데 적합하다.

제한된 용량

AsyncStorage는 플랫폼에 따라 저장 용량이 제한될 수 있다. Android에서는 약 6MB, iOS에서는 약 4MB의 데이터 용량 제한이 있으므로 대량의 데이터를 저장하는 데는 적합하지 않다. 필요 시 SQLite 또는 다른 대체 솔루션을 고려해야 한다.

설치 및 호환성

AsyncStorage는 다양한 플랫폼에서 사용할 수 있으며, 설치 방법은 다음과 같다:

설치 방법

• npm 사용 시:

npm install @react-native-async-storage/async-storage

• Yarn 사용 시:

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

• Expo CLI 사용 시:

npx expo install @react-native-async-storage/async-storage

플랫폼 호환성

• Android, iOS: React Native 0.60+ 필요. CLI 자동 링크 기능이 모듈을 앱 빌드 시 연결.
• Windows: React Native Windows 0.63+ 필요.
• macOS: React Native macOS 0.63+ 필요. macos/Podfile에 platform :macos, '10.14' 설정 후 pods 설치.
• Web: AsyncStorage는 웹을 직접 지원하지 않음. 대신 LocalStorage, SessionStorage, 또는 IndexedDB를 사용해야 한다.

AsyncStorage의 사용법

데이터 저장

데이터를 저장하려면 setItem 메서드를 사용한다:

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

const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.error('Error storing data', error);
  }
};

데이터 검색

저장된 데이터를 검색하려면 getItem 메서드를 사용한다:

const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      return value;
    }
  } catch (error) {
    console.error('Error retrieving data', error);
  }
};

데이터 삭제

데이터를 삭제하려면 removeItem 메서드를 사용한다:

const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.error('Error removing data', error);
  }
};

다중 데이터 처리

AsyncStorage는 여러 데이터를 한 번에 처리할 수 있는 메서드를 제공한다:

• multiSet: 여러 키-값 쌍을 한 번에 저장.
• multiGet: 여러 키에 해당하는 값을 한 번에 검색.
• multiRemove: 여러 키에 해당하는 데이터를 한 번에 삭제.
• multiMerge: 여러 키의 데이터를 병합하여 저장.

다중 데이터 처리 예시:

const saveMultiple = async () => {
  try {
    await AsyncStorage.multiSet([['key1', 'value1'], ['key2', 'value2']]);
  } catch (error) {
    console.error('Error saving multiple items', error);
  }
};

고급 설정 및 성능 최적화

AsyncStorage의 성능을 최적화하거나 데이터 저장 용량을 늘리기 위해서는 다음과 같은 고급 설정을 사용할 수 있다:

데이터베이스 크기 조절

기본적으로 AsyncStorage는 6MB의 용량을 제공하지만, 다음과 같이 크기를 조절할 수 있다. android/gradle.properties 파일에 다음 설정을 추가하면 최대 10MB까지 늘릴 수 있다:

AsyncStorage_db_size_in_MB=10

비동기 작업 최적화

비동기 작업이 반복적으로 발생하는 경우, AsyncStorage의 작업 순서를 관리하여 성능을 최적화할 수 있다. 이는 데이터 저장과 검색이 빈번하게 발생하는 경우에 유용하다.

장단점

장점

• 비동기 처리: UI 스레드 차단 없이 데이터 작업 가능.
• 간편한 API: 키-값 쌍으로 손쉽게 데이터 관리 가능.
• 플랫폼 독립성: iOS와 Android 모두에서 동일하게 작동.
• Expo 사용 가능: expo에서도 별도의 설정 없이 바로 사용 가능.

단점

• 제한된 용량: 대량의 데이터 저장에 부적합. Android와 iOS에서 각각 약 6MB와 4MB 정도로 제한됨.
• 보안 문제: 민감한 데이터를 저장하기에는 보안이 취약할 수 있음. 데이터는 평문으로 저장되므로 SecureStore 같은 대체 라이브러리 사용을 권장.
• 동시성 문제: 다중 스레드 환경에서의 동시 접근 시 충돌 가능성 있음.

같이 보기

• SecureStore: 키를 암호화 해서 OS 암호화 영역에 저장한다. Expo 라이브러리.
• MMKV: AsyncStorage보다 30배 더 빠른 키-값 저장 라이브러리.

참고 문헌

• async-storage
• React Native 문서
• React Native 공식 문서
• Expo AsyncStorage 문서