[React-native] AsyncStorage (앱 저장소) 사용 방법

앱을 껐다가 다시 켜면 데이터가 남아있어야만 지속해서 앱을 사용할 수 있다.

React-native에서는 간단한 데이터를 저장할 수 있는 방법을 몇 가지 제공하는데,

가장 간단한 AsyncStorage 사용법을 정리해본다.

AsyncStorage에서 중요한 것!!!
 - setItem : 저장하기 -> 무조건 string 으로만 저장 가능
 - getItem : 가져오기
 - Key값을 함께 저장해서, 해당하는 Key의 value 값을 가져오는 방식

1. 공식 사이트 소개

https://react-native-async-storage.github.io/async-storage/docs/install

Installation | Async Storage

2. 인스톨 

expo cli로 설치를 했더니 이상한 에러가 발생했다. 

npm이나 Yarn을 사용해서 설치하는 것을 추천한다.

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

3. 사용법

(1) 우선 라이브러리를 불러온다.

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

(2) 일단 저장해본다. string 데이터는 그냥 저장하면 되는데, 배열 데이터와 같은 object 파일은 다음과 같이 저장해줘야 한다.

(그리고, 간혹 useEffect와 같은 훅 안에서 async를 사용할 수 없는 경우가 있다. 그럴 땐, 외부에서 함수를 하나 만들어서 useEffect 같은 훅 안에 넣으면 작동된다.)

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

(3) 불러온다. 마찬가지로 object 파일의 경우, JSON.parse를 사용해서 변환해서 가져온다. 

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('my-key');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    // error reading value
  }
};

일반적으로 데이터 추가, 삭제, 업데이트 함수 등에는 setItem을 사용하고,

useEffect의 didmount 기능을 사용하여 초기에 저장된 값을 getItem을 사용하여 불러온다.

이런 흐름으로 코드를 짜면 된다.