1. AsyncStorage란?

AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소입니다. iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드 에서는 네이티브 코드와 SQLite로 구현되어 있습니다.

AsyncStorage는 브라우저에서 사용하는 localStorage와 비슷합니다. 값을 저장할 때는 문자열 타입으로 저장해야 하며, getItem, setItem, removeItem, clear 등 localStorage에서 사용하는 메서드와 같은 이름을 가진 메서드도 존재합니다.

localStorage와 가장 큰 차이점이라면 AsyncStorage는 이름에서부터 알 수 있듯 비동기적으로 작동한다는 것입니다. 값을 조회하거나 설정할 때 자바스크립트의 Promise를 반환합니다.

AsyncStorage는 앱이 꺼져도 유지되어야할 데이터를 저장할 때 사용하면 됩니다. 로컬 환경에서 동작하는 '할 일' 앱이나, '메모' 앱과 같이 앱을 사용하고 종료한 후, 다시 사용할 때 데이터가 그대로 저장되어 있어야할 때 사용합니다.

이 글은 자바스크립트 동작 방식을 다루는 글이 아니기 때문에 Promise 및 비동기에 대한 설명은 생략하겠습니다.

2. 설치

React Native CLI와 Expo-CLI 모두 동일한 패키지를 사용합니다. React Native CLI에서는 패키지 설치 후 pod install 해주어야 합니다.

React Native CLI:

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

pod install

Expo CLI:

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

3. 사용법

AsyncStorage는 문자열 데이터만 저장할 수 있습니다. 객체 데이터를 저장하려면 먼저 데이터를 직렬화해야 합니다. JSON으로 직렬화할 수 있는 데이터의 경우 데이터를 저장할 때는 JSON.stringify()를, 데이터를 로드할 때는 JSON.parse()를 사용하면 됩니다.

API를 살펴보며 자세히 알아보겠습니다.

패키지 불러오기

AsyncStorage를 사용할 컴포넌트의 상단에 패키지를 importing 하면 됩니다.

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

데이터 저장하기

비동기 함수를 사용하여 setItem('key', 'value') 메서드로 저장합니다.

const storeData = async () => {
  try {
    await AsyncStorage.setItem('key', value);
  } catch (e) {
    // 오류 예외 처리
  }
};

값을 저장할 때에는 문자열 타입을 저장해야 하며, 만약 객체 또는 배열 타입을 저장하려면 다음과 같이 JSON.stringify 함수를 사용해준 값을 저장해야 합니다.

const storeData = async () => {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem('key', jsonValue);
  } catch (e) {
    // saving error
  }
};

데이터 불러오기

데이터를 불러올 때에는 getItem('key') 메서드를 사용합니다. 주어진 키에 대한 데이터가 발견되면 저장된 값으로 확인하거나 그렇지 않으면 null을 반환하는 프로미스를 반환합니다.

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('key');
    // value를 사용하는 코드
    if (value !== null) {
      // 이전에 지정된 값
    }
  } catch (e) {
    // 에러 예외 처리
  }
};

만약 객체 및 배열을 불러오려면 JSON.parse 함수를 사용하여 문자열을 JSON으로 변환해야 합니다.

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('key');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    // 에러 예외 처리
  }
};

데이터 삭제하기

AsyncStorage에 저장되어 있는 특정 값을 삭제하고 싶다면 removeItem(key) 메서드를 사용하면 됩니다.

removeValue = async () => {
  try {
    await AsyncStorage.removeItem('key');
  } catch(e) {
    // 에러 예외 처리
  }
}

데이터 초기화

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

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

이 외에도 많은 API들이 있으나, AsyncStorage를 사용하는 데에 있어 이 4가지 메서드만 알고 있다면 크게 지장이 없습니다. 추가적인 API를 확인하고 싶다면 공식 문서를 확인해보세요.

참조

1. AsyncStorage 공식 문서
2. 리액트 네이티브를 다루는 기술, 김민준