[React Native] Local Storage 대신 Async Storage 사용하기

AsyncStorage란?

React Native에서 LocalStorage 대신 사용하는 저장소

비동기로 key-value 저장하여 사용함

---

설치

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

OR

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

 

 

---

사용 방법

1. AsyncStorage를 호출하여 Key-Value를 저장 - AsyncStorage.setItem(key, value);

2. AsyncStorage를 Key값으로 호출하여 Value 불러오기 - AsyncStorage.getItem(key);

사용 시에는 항상 비동기 식으로 호출해야 함

 

예시 코드

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

...

const setItem = async () => {
    await AsyncStorage.setItem("key", "value");
}

const getItem = async () => {
    await AsyncStorage.getItem("key");    
}

 

 

---

추가적으로

AsyncStorage.getItem 시 에러가 뜨는 경우

사실 에러는 아니고 데이터가 저장되기 전에 getItem를 하다보니 null 을 가지고 오는 것

반환 값이 아래와 같이 뜬 경우

{"_h": 0, "_i": 0, "_j": null, "_k": null}

 

1. AsyncStorage.setItem이 잘 되었는지 확인

2. 만약 공통으로  AsyncStorage.getItem을 선언해놓고 사용한다면

선언시에도 async - await 사용, 데이터 가져오는 메서드에서도 async - await 사용해야 함

 

예시 코드

// 글로벌하게 선언해놓고 사용하는 메서드
const getAsyncStorage = async (key) => {
    const value = await AsyncStorage.getItem(key); 
    return JSON.parse(value);
}

// 호출 메서드
const getUserId = async () => {
    const userId = await getAsyncStorage("userId");
    console.log(userId);
}