AsyncStorage란 리액트 네이티브에서 사용할 수 있는 영속적인(local) 데이터를 저장할 수 있게 해주는key-value 형식의 저장소입니다.
로그인 토큰, 유저 설정, 다크모드 여부 같은 정보를 저장하는데 사용됩니다.

기본 개념
1. 비동기(async)로 동작 => 저장/읽기 작업에 시간이 걸릴 수 있어 awit을 사용한다.
2. 앱을 껐다 켜도 데이터가 유지된다.
3. 로컬 스토리지처럼 작동하지만 모바일에 최적화되어 있다.

AsyncStorage 설치

Expo docs
https://docs.expo.dev/versions/latest/sdk/async-storage/
Async Storage docs
https://react-native-async-storage.github.io/async-storage/docs/install

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

주요 메소드 정리

메소드	설명
setItem(key, value)	데이터 저장
getItem(key)	데이터 불러오기
removeItem(key)	데이터 삭제
clear()	모든 데이터 삭제
getAllKeys()	저장된 모든 키 가져오기
multiSet([[k1, v1], [k2, v2], ...])	여러 데이터 한 번에 저장
multiGet([[k1], [k2], ...])	여러 데이터 한번에 가져오기

사용 예시

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

// 저장하기
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.error('데이터 저장 실패', e);
  }
};

// 불러오기
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      return value;
    }
  } catch (e) {
    console.error('데이터 불러오기 실패', e);
  }
};

// 삭제하기
const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (e) {
    console.error('데이터 삭제 실패', e);
  }
};

로그인 토큰 저장 예시

await AsyncStorage.setItem('accessToken', 'abc123');
const token = await AsyncStorage.getItem('accessToken');

JSON 데이터 저장 예시

const user = { id: 1, name: '홍길동' };
await AsyncStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(await AsyncStorage.getItem('user'));