티스토리 뷰

 AsyncStorage는 React Native에서 제공하는 간단하고 비동기적인 키-값 저장 시스템이다. 이 시스템은 앱 세션 간 데이터를 영속적으로 저장하는 데 주로 사용된다. AsyncStorage는 사용자 설정, 앱 상태 또는 간단한 인증 정보와 같은 작은 데이터를 로컬 장치에 저장하기 위한 것이다.

 

이 시스템은 암호화되지 않았으므로, 중요한 정보나 대량의 데이터를 저장하기에는 적합하지 않다.

 

AsyncStorage의 주요 메소드로는 setItem, getItem, removeItem, clear 등이 있다.

 

데이터는 문자열 형태로 저장되므로, 객체를 저장하려면 JSON.stringify를 사용하여 직렬화해야 하며, 데이터를 검색할 때는 JSON.parse를 사용하여 역직렬화해야 한다.

 

설치는 마찬가지로 yarn이나 npm을 이용하여 할 수 있다.

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

 

ios의 경우는 아래와 같이 pod install을 다시 해줘야 한다.

cd ios
pod install

 

import 구문은 아래와 같다.

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

아주 간단한 사용자의 로그인 상태를 저장하는 간단한 예제 코드를 통해 확인해보자.

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

// 로그인 상태 저장
const saveLoginState = async (isLoggedIn) => {
  try {
    await AsyncStorage.setItem('isLoggedIn', JSON.stringify(isLoggedIn));
  } catch (error) {
    // 오류 처리
  }
};

// 로그인 상태 불러오기
const loadLoginState = async () => {
  try {
    const value = await AsyncStorage.getItem('isLoggedIn');
    if (value !== null) {
      return JSON.parse(value);
    }
  } catch (error) {
    // 오류 처리
  }
};

// 로그인 상태 삭제
const deleteLoginState = async () => {
  try {
    await AsyncStorage.removeItem('isLoggedIn');
  } catch (error) {
    // 오류 처리
  }
};

// 모든 데이터 삭제
const clearAll = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    // 오류 처리
  }
};

 

위 코드는 AsyncStorage를 사용하여 사용자의 로그인 상태를 저장하고, 불러오며, 삭제하는 방법을 보여준다.

 

AsyncStorage는 간단한 데이터를 저장하는 데 유용하지만, 보다 복잡한 데이터 요구 사항에 대해서는 다른 데이터베이스 솔루션을 사용하는 것이 권장되는 사항이다.

 

 

끝!

'Mobile > react-native' 카테고리의 다른 글

[react-native] React Navigation  (1) 2024.01.10
[react-native] todoList에 AsyncStorage 적용  (1) 2024.01.08
[react-native] vector module 셋팅  (0) 2024.01.07
[react-native] Todo List  (1) 2024.01.07
[react-native] StyleSheet: resizeMode  (1) 2024.01.07
Comments