[React Native] AsyncStorage

 

 

 

날씨 앱에 이어서 ToDo 앱을 제작하면서,

사용자가 작성한 일정들이 앱을 재시작했을 때에도

남아있기를 ! 하는 마음으로 찾게 된 AsyncStorage

 

안드로이드에서 SQLite 처럼 React Native 에 내장된

기본 데이터 저장소인 AsyncStorage 에 대해 알아보자 💾

 

 

---

 

 

React Native 에서 로컬 데이터베이스를 사용하기 위해서는

아래와 같이 2가지 방법이 있다.

• SQLite
• AsyncStorage

SQLite 는 안드로이드에서 자주 다루어보았으니

AsyncStorage 에 대해 다뤄보자 💫

(추가로, realm 도 있지만 expo 에서 작동되지 않는다고 한다!)

 

 

 

---

 

AsyncStorage

AsyncStorage 는 React Native 를 위한 key-value 형식의 저장소이다.

이는 Window.localStorage 와 매우 유사하며,

react-native 에 포함된 async-storage 는 deprecated 되었으므로, 

Expo 에서 배포하는 asyncStorage 를 사용해보자.

 

 

우선 아래와 같이 설치를 진행한다.

$ expo install @react-native-async-storage/async-storage

 

 

사용자의 ToDo 를 저장하고 읽어오는 코드를 보며,

기본적인 사용 방법을 익혀보자

import AsyncStorage from "@react-native-async-storage/async-storage";
const STORAGE_KEY = "@toDos";

const [ toDos, setToDos ] = useState({});
const saveToDos = async (toSave) => {
  # setItem : 새로운 데이터(item) 저장하기
  await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
};

const loadToDos = async () => {
  # getItem : 저장된 데이터(item) 을 key 값을 이용해 받아오기
  const s = await AsyncStorage.getItem(STORAGE_KEY);
  setToDos(JSON.parse(s));
};

기본적으로 setItem 과 getItem 을 사용하여 데이터를 쓰고 읽어내며,

AsyncStorage 는 String 값의 key-value 체인으로 되어있기 때문에

JSON 이나 Array 와 같은 데이터 형식으로 변환하여 사용해주면 된다 !

 

그럴 때에는 JSON.parse / JSON.stringify 를 사용하면 된다.

간단하게 저장소를 사용해보자 🤹‍♀️

 

 

 

 

 

© 참고

https://docs.expo.dev/versions/latest/sdk/async-storage/ (Expo AsyncStorage 공식 문서)

AsyncStorage 사용법 공식 페이지

React Native : AsyncStorage 쉽게 사용해보기

AsyncStorage - Expo Documentation