async-storage 사용하기

🚀

들어가기 전에🔗

이 포스팅은 Expo SDK 52를 기준으로 작성되었습니다.

웹 개발에는 localStorage라는 간단한 데이터 저장소가 있습니다. 이것은 브라우저에 데이터를 저장할 수 있는 방법 중 하나입니다. 하지만 리액트 네이티브 환경에서는 localStorage를 사용할 수 없고, 대신 async-storage를 사용해야 합니다. async-storage는 비동기로 데이터를 저장하고 불러올 수 있는 방법이며, 리액트 네이티브 환경에서 사용할 수 있습니다. 이번 포스트에서는 async-storage를 사용하는 방법에 대해 알아보겠습니다.

참고로 async-storage는 리액트 네이티브 환경에서 사용할 수 있는 데이터 저장소입니다. 따라서 리액트 네이티브 웹 앱이나 PWA에서는 사용할 수 없습니다. 또한 Expo 뿐만 아니라 React Native CLI 환경에서도 사용할 수 있습니다.

🚀

async-storage 설치하기🔗

async-storage를 사용하기 위해서는 먼저 @react-native-async-storage/async-storage 패키지를 설치해야 합니다. 이 패키지는 기존 RN에서 사용하던 @react-native-community/async-storage 패키지를 대체하고 있습니다. 따라서 어떠한 이유로 @react-native-community/async-storage 패키지를 사용하고 있다면 이를 @react-native-async-storage/async-storage 패키지로 변경해야 합니다.

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

expo cli를 사용하고 있다면 다음 명령어를 사용하여 async-storage를 설치할 수 있습니다.

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

🚀

async-storage 사용하기🔗

async-storage를 사용하려면 먼저 import 구문을 사용하여 패키지를 불러와야 합니다.

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

✅

주의사항🔗

🖐️

AsyncStorage는

문자열

만 저장할 수 있습니다.

따라서 객체나 배열을 저장하려면 JSON.stringify를 사용하여 문자열로 변환한 후 저장하고, JSON.parse를 사용하여 다시 객체나 배열로 변환해야 합니다.

const obj = { key: 'value' };
const str = JSON.stringify(obj);

const obj = JSON.parse(str);

✅

데이터 저장하기🔗

async-storage는 Promise를 반환하는 메소드를 제공합니다. 따라서 async/await나 Promise를 사용하여 데이터를 저장하거나 불러올 수 있습니다. getItem이 구성되어있는 방식은 다음과 같습니다.

static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise

다음 예시는 setItem 메소드를 사용하여 데이터를 저장하는 방법입니다.

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

object 또는 array를 저장하려면 JSON.stringify를 사용하여 문자열로 변환한 후 저장해야 합니다.

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

✅

데이터 불러오기🔗

async-storage는 getItem 메소드를 사용하여 데이터를 불러올 수 있습니다. getItem이 구성되어있는 방식은 다음과 같습니다.

static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void): Promise

getItem 메소드를 사용하여 데이터를 불러올 수 있습니다.

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

object 또는 array를 불러올 때는 JSON.parse를 사용하여 문자열을 객체나 배열로 변환해야 합니다.

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

🚀

결론🔗

이번 포스트에서는 async-storage를 사용하는 방법에 대해 알아보았습니다. async-storage는 리액트 네이티브 환경에서 데이터를 비동기로 저장하고 불러올 수 있는 방법입니다. async-storage를 사용하면 앱에서 간단한 데이터를 저장하고 불러올 수 있습니다.

✅

더 생각해 보기🔗

async-storage에는 어떤 메소드가 더 있을까요?

mergeItem↗: 저장소에 저장되어있는 아이템을 자동으로 json화 시켜 같은 키를 가진 아이템을 업데이트합니다.

const USER_1 = {
	name: 'Tom',
	age: 20,
	traits: {
		hair: 'black',
		eyes: 'blue'
	}
}
const USER_2 = {
	name: 'Sarah',
	age: 21,
	hobby: 'cars',
	traits: {
		eyes: 'green',
	}
}
mergeUsers = async () => {
	try {
		//save first user
		await AsyncStorage.setItem('@MyApp_user', JSON.stringify(USER_1))
		// merge USER_2 into saved USER_1
		await AsyncStorage.mergeItem('@MyApp_user', JSON.stringify(USER_2))
		// read merged item
		const currentUser = await AsyncStorage.getItem('@MyApp_user')
		console.log(currentUser)
		// console.log result:
		// {
		//   name: 'Sarah',
		//   age: 21,
		//   hobby: 'cars',
		//   traits: {
		//     eyes: 'green',
		//     hair: 'black'
		//   }
		// }
	}
}

removeItem↗: 저장소에서 데이터를 삭제합니다.
getAllKeys↗: 저장소에 있는 모든 키를 가져옵니다.
multiGet↗: 여러 키에 대한 값을 가져옵니다.
multiSet↗: 여러 키에 대한 값을 저장합니다.
multiMerge↗: 여러 키에 대한 값을 병합합니다.
multiRemove↗: 여러 키에 대한 값을 삭제합니다.
clear↗: 저장소에 있는 모든 데이터를 삭제합니다.
useAsyncStorage↗: async-storage를 사용하는 커스텀 훅을 만듭니다.

✅

참고🔗

Async Storage - Data storage system for React Native.↗

추천 포스트

async-storage 사용하기using async-storage