[React] AsyncStorage 사용하기

1. 사용 이유

React에서는 데이터를 저장할 때 내부 State에 저장하거나 Redux를 사용합니다. 하지만 State는 앱이 꺼지거나 Screen이 전환되면 데이터가 사라질 수 있다는 문제점이 있습니다.

이러한 문제점을 해결하기 위해 우리는 AsyncStorage를 사용합니다.

2. 설치

다음 명령어를 입력하여 설치해줍니다.

npm i @react-native-community/async-storage

3. import

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

4. 기본적인 사용방법

기본적인 사용방법은 다음과 같습니다.

저장하는 방법

AsyncStorage.setItem(
  '저장할이름', //String 타입
  '저장할데이터', //String 타입
  () => {
  console.log('User nickname save complete.')
});

불러오는 방법

AsyncStorage.getItem(
  '가져올이름', //String 타입
  (err, result) => {
  console.log(result)
});

만약 value가 JSON형태로 되어있다면, JSON.stringfy메서드를 이용해 string으로 바꿔준 후 저장합니다.

storeData

export const storeData = async (key: string, value: any) => {
  try {
    const stringValue = JSON.stringfy(value);
    await AsyncStorage.setItem(key, stringValue);
  } catch (e: any) {
    console.error(e.message);
  }
};

데이터를 받아오기 위해서는 JSON.parse메서드를 사용하여 JSON형태의 문장을 object형식에 맞게 바꾸어줍니다.

getData

export const getData = async (key: string) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      const data = JSON.parse(value);
      return data;
    }
  } catch (e:any) {
    console.log(e.message);
  }
};