[React-Native] AsyncStorage 사용하기

AsyncStorage 란?

데이터를 Local 데이터베이스에 저장할 때 사용합니다.

AsyncStorage도 state, redux와 같이 데이터를 저장할 수 있는 것은 같습니다.

하지만 state는 앱이 꺼지거나, Screen의 이동이 일어나면 값이 보장되지 않고 사라질수 있기 때문입니다.

그래서 AsyncStorage를 사용하여 앱이 꺼져도 써야하는 데이터의 경우 Local 데이터베이스에 저장합니다.

 

install

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

 

사용법

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

// 정보 저장
AsyncStorage.setItem('Token','token info', () => {
  console.log('토큰 저장 완료')
});

// 정보 불러오기
AsyncStorage.getItem('Token', (err, result) => {
  console.log(result); // token info 출력
});

// 정보 바꾸기
AsyncStorage.mergeItem('Token', 'token info merge')

// 전체 데이터 지우기
AsyncStorage.clear()

AsyncStorage.setItem(key 값, 저장할 데이터)

•  LocalStorage에 데이터를 저장할 수 있습니다. 
• 첫 번째 요소에는 저장 할저장할 이름을 넣고, 두 번째 요소에는 저장할 내용을 넣습니다.

AsyncStorage.getItem(key 값, () => 결과값)

• LocalStorage에 저장된 데이터를 불러올 수 있습니다.
• 첫 번째 요소에는 불러올 데이터의 이름을 넣고, 두 번째에서는 함수를 통해 저장된 값을 가져옵니다.

AsyncStorage.mergeItem(key값, 새로운 데이터)

• LocalStorage에 저장된 데이터의 값을 바꿀 수 있습니다.
• 첫 번째 요소에는 바꿀 값의 이름(key 값)을 넣고, 두 번째 요소에는 변경할 내용을 넣습니다.

AsyncStorage.clear()

• LocalStorage에 저장된 모든 데이터를 지웁니다.
• 복구가 불가능 하니 조심해서 사용하세요

 

모듈화

AsyncStorage는 key-value 형식의 스토리지이며, String 만 저장이 가능합니다.

그래서 JSON이나 Array와 같은 데이터 형식을 저장할 때는 JSON.parse와 JSON.stringify로 항상 Object나 Array를 String으로 바꾸어서 저장하고 가져와야 합니다.

 

< 기존 방식 >

// 정보 (name, age) 저장
AsyncStorage.setItem('info',JSON.stringify({'name': 'Kim', 'age','23'}), () => {
  console.log('저장 완료')
});

// 정보 출력
AsyncStorage.getItem('info', (err, result) => {
  const MyInfo = Json.parse(result);
  console.log('이름 : ' + MyInfo.name); // 출력 => 이름 : kim
  console.log('나이 : ' + MyInfo.age); //  출력 => 나이 : 23
});

 

< 모듈화 >

import AsyncStorage from "@react-native-community/async-storage";
import Common from "../src/common";

// 데이터를 저장 하는 함수
export const setItemToAsync = (storageName, item) => {
    if (Common.isEmpty(storageName)) { // 들어온 key 값 체크
        throw  Error('Storage Name is Empty');
    }
    return new Promise((resolve, reject) => {
    //  JSON.stringify로 스트링으로 변환한뒤에 저장
        AsyncStorage.setItem(storageName, JSON.stringify(item), (error) => {
            if (error) {
                reject(error);
            }
            resolve('입력 성공');
        })
    })
}

// 저장된 데이터를 불러오는 함수
export const getItemFromAsync = (storageName) => {
    if (Common.isEmpty(storageName)) { // 들어온 key 값 체크
        throw  Error('Storage Name is Empty');
    }
    return new Promise((resolve, reject) => {
        AsyncStorage.getItem(storageName, (err, result) => {
            if (err) {
                reject(err);
            }

            if (result === null) {
                resolve(null);
            }

            resolve(JSON.parse(result)); // 결과값을 JSON.parse를 사용하여 반환
        })
    })
}

 

 

 

참고 

https://jw910911.tistory.com/73

React Native : AsyncStorage 쉽게 사용해보기.

https://peakd.com/kr/@anpigon/reactnative-asyncstorage-sqlite-realm

[React Native] 데이터 저장하기 : AsyncStorage와 SQLite, 그리고 Realm | PeakD