React Native앱개발-Async Storage사용하기

리액트 네이티브앱을 개발할 때 서비스용 데이터를 핸드폰에 저장하는 방법으로 Async Storage 를 사용하는 방법에 대해 알아보고자 합니다. 

별도의 백엔드 서버 및 데이터베이스 구축없이 간단한 텍스트 데이터의 경우 핸드폰 저장장치에 저장하고 사용할 수 있습니다.

사용하는 방법과 제약사항에 대해 구체적으로 알아보겠습니다.

 

1.  Async Storage 특징

• 텍스트 데이터만 저장 가능
• Object 형식으로 저장해야 해서 저장할 데이터를 JSON 포맷으로 변경 : JSON.stringify() 
• 저장된 데이터 불러오기 : JSON.parse()

2.  설치하기

• expo 의 경우
  • npx expo install @react-native-async-storage/async-storage
• react navtive cli 이 경우 (React Native 버젼 0.60+) 
  • npm install @react-native-async-storage/async-storage

3.  프로젝트에서 사용하기

• 패키지 불러오기
  • import AsyncStorage from '@react-native-async-storage/async-storage';
• 저장하기 : setItem 사용
  • string 데이터 : key 값을 지정 (저장 데이터 구분 관리)

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

• 저장하기 : setItem 사용
  • Object 데이터 : JSON.stringify 로 JSON 포맷으로 변환 후 저장

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

 

• 불러오기 : getItem 사용
  • string 데이터 : 저장할 때 사용한 key 값으로 데이터 불러오기

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('my-key');
    if (value !== null) {
      // value previously stored
    }
  } catch (e) {
    // error reading value
  }
};

 

• 불러오기 : getItem 사용
  • object 데이터 : 데이터 불러와서 JSON 포맷을 Object으로 변환

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

 

•  async/await 이용한 데이터 저장 및 불러오기
  • key 값을 변수에 저장 
    • const STORAGE_KEY = "@toDos";
  • 저장하기 : JSON.stringify 사용
  • 불러오기 : JSON.parse 사용

// 저장하기
const saveTodos = async (toSave) => {
			  await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
			  };
              
// 불러오기
const loadTodos = async () => {
			  const s = await AsyncStorage.getItem(STORAGE_KEY);
			  setToDos(JSON.parse(s));
			  };

 

4.  데이터 저장장소

• React Native 를 앱 뿐만아니라 web 및 pc 어플리케이션에서도 사용가능하므로 각 OS 환경에 따른 저장 환경은 다음과 같음
• Android : SQLite
• iOS/macOS : 1024 character 미만 manifest.json file 저장, 큰 값은 개별 파일 MD5 에 저장 (hashed key)
• Web : window.localStorage
• Windows : SQLite

5.  데이터 저장크기

• Android : SQLite 기본 6MB (앱에 너무 많은 데이터를 저장하는 것을 방지)
• 사이즈 조정시 android/gradle.properties 에 MB단위로 사이즈 지정
  • AsyncStorage_db_size_in_MB=10  (10MB 지정 예시)