[React Native] AsyncStorage

AsyncStorage

들어가며

• 리액트 네이티브(React Native)에서 로컬에 간단한 데이터를 저장할 수 있는 비동기 저장소인 AsyncStorage에 대해 간단하게 정리해본다.

 

 

AsyncStorage

개념

• 로컬에 간단한 데이터를 키-값(Key-Value) 쌍으로 저장하고 불러오는 비동기 저장소
• 모바일 기기 내부에 데이터를 영구 저장하는 공간
• 웹의 localStorage와 비슷하지만, 비동기 방식이며, 네이티브에 최적화되어 있다.
• 앱 재실행 후에도 데이터를 유지할 수 있다.
• 용량이 크지 않은 간단한 데이터 저장에 적합하다. (예: 토큰, 사용자 설정, 간단한 캐시 등)

 

설치

• 리액트 네이티브 0.60 이상에서는 공식 패키지 @＠react-native-async-storage/async-storage@를 사용한다.

$ npm install @react-native-async-storage/async-storage   # yarn add @react-native-async-storage/async-storage

 

사용 시 주의사항

• 저장하는 값은 반드시 문자열(String) 이어야 한다. 
  • 객체 등은 @JSON.stringify()@ 해서 저장하고, 불러올 때 @JSON.parse()@ 한다.
• AsyncStorage는 비동기이므로 반드시 @await@ 또는 @.then()@ 으로 처리한다.
• 민감한 데이터(비밀번호, 신용카드 등)는 보안상 AsyncStorage에 저장하지 않는 것이 좋다.

 

사용 예 : 토큰 저장 및 불러오기

// 토큰 저장
await AsyncStorage.setItem('token', idToken);

// 토큰 불러오기
const token = await AsyncStorage.getItem('token');

// 불러온 토큰으로 인증 상태 결정 가능
const isAuthenticated = token !== null;

 

사용 예제

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

// 데이터 저장 (setItem)
async function saveData(key, value) {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.error('Failed to save data:', e);
  }
}

// 데이터 불러오기 (getItem)
async function loadData(key) {
  try {
    const value = await AsyncStorage.getItem(key);
    if(value !== null) {
      return value;  // 값이 존재할 경우 반환
    }
  } catch (e) {
    console.error('Failed to load data:', e);
  }
  return null;  // 값 없거나 에러 시 null 반환
}

// 데이터 삭제 (removeItem)
async function removeData(key) {
  try {
    await AsyncStorage.removeItem(key);
  } catch (e) {
    console.error('Failed to remove data:', e);
  }
}

 

참고 사이트

Async Storage | Async Storage

GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native.