Expo - 로컬에 자료 저장하고 불러오기 + 앱 로딩하면서 불러오기

AsyncStorage, AppLoading을 이용해 로컬에 자료를 저장/불러오고, 앱 로딩하면서 저장된 자료를 불러오도록 만들어본다.

 

AsyncStorage

AsyncStorage는 자료를 로컬에 저장하고 불러올 수 있도록 도와주는 API이다.

https://docs.expo.dev/versions/latest/sdk/async-storage/

AsyncStorage - Expo Documentation

사용하기 위해 터미널에서 다운받아준다.

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

expo install은 npm install과 똑같이 다운로드 하는데, 현재 expo 버전에 맞는 버전을 확인하는 과정을 거친다고 한다.

 

다운로드 후 사용을 위해 import하고 사용한다.

AsyncStorage에서는 키:데이터(문자열) 으로 저장한다고 한다.(javascript에서 localStorage사용방법과 같다)

import AsyncStorage from '@react-native-async-storage/async-storage';
 
// 자료 저장하기
const storeData = async tasks => {
  try {
    // 'tasks' 라는 항목에 tasks 저장
    await AsyncStorage.setItem('tasks', JSON.stringify(tasks));
  } catch (e) {
    // saving error
  }
}
 
// 자료 불러오기
const getData = async () => {
  try {
    // 'tasks'항목에 저장된 자료 
    const loadedData = await AsyncStorage.getItem('tasks');    // 자료가 없을 때 에러가 뜨지 않도록 빈객체를 반환하도록 한다
    setTasks(JSON.parse(loadedData) || "{}");
  } catch(e) {
    // error reading value
  }
}
 

AsyncStorage.setItem("key", data); // 자료 저장/수정

AsyncStorage.getItem("key"); // 자료 불러오기

형태로 사용한다.

 

await 을 사용해 데이터를 모두 저장하거나 불러온 후 다음 작업이 수행되도록 한다.

 

 

AppLoading

AppLoading은 App이 시작할 때 특정 작업을 실행하도록 하는 컴포넌트이다.
작업 수행 중에는 로딩화면 나타나도록 유지된다.

 

https://docs.expo.dev/versions/latest/sdk/app-loading/

AppLoading - Expo Documentation

 

AppLoading도 사용하기 위해 터미널에서 다운받는다.

expo install expo-app-loading

 

AppLoading 컴포넌트의 Props

startAsync : AppLoading 컴포넌트 실행중 동작할 함수
onError: 해당 함수 에러시 처리할 내용
onFinish: 해당 함수 완료시 처리할 내용

 

import React, { useState } from "react";
import AppLoading from 'expo-app-loading';
 
export default function App() {
    // 로딩/준비 상태를 확인하기 위한 state
    const [isReady, setIsReady] = useState(false);
 
    return isReady ? (
        // 앱 화면
    ) : (
        // 로딩중 화면
        <AppLoading
              startAsync={getData}
              onFinish={() => setIsReady(true)}
              onError={() => console.warn}
        />
      );
}

로딩중 getData함수를 실행하도록 한다.

완료되면 isReady가 true로 바뀌면서 App.js가 새로고침되어 isReady = true로 앱 화면이 렌더링되고,

실패시 console.warn이 실행된다.

 

 

참고한 사이트

https://docs.expo.dev/versions/latest/sdk/async-storage/

AsyncStorage - Expo Documentation

https://docs.expo.dev/versions/latest/sdk/app-loading/

AppLoading - Expo Documentation