[RN][EXPO] Async Storage와 Secure Store에 관하여..
Authentication & Authorization 패턴을 위한 Token과 첫 진입을 판단하는 DeviceID 등,
앱이 종료되어도 유지되는 데이터를 관리하기 위해 로컬 스토리지를 사용했다.
Expo의 경우, 로컬에 데이터를 저장하는 방식이 두가지 존재하는데,
두 저장 방식을 알아보도록 하자!
📍 Async Storage
key-value 기반의
데이터를 암호화하지 않고,
저장하고 불러올 수 있도록 하는 라이브러리이다.
설치
npx expo install @react-native-async-storage/async-storage
사용법
AsyncStorage.setItem() , AsyncStorage.getItem() API를 통해 데이터를 저장, 불러올 수 있다.
비동기적으로 동작하기 때문에 Promise를 반환하는데,
then이나 catch 메서드를 사용하여 결과를 처리하거나, async/await 문법을 사용하여 비동기적으로 처리한다.
string 데이터만 저장할 수 있으므로, 그외 타입 데이터는 직렬화 - 파싱하는 과정을 거쳐야 한다.
JSON.stringify() 를 통해 직렬화하여 저장하고, JSON.parse() 로 파싱하여 불러와야 한다.
import AsyncStorage from '@react-native-async-storage/async-storage';
export const storeData = async (key, value) => {
try {
const jsonValue = JSON.stringify(value);
await AsyncStorage.setItem(key, jsonValue);
} catch (e) {
console.error('Error storing data:', e);
}
};
export const getData = async (key) => {
try {
const jsonValue = await AsyncStorage.getItem(key);
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch (e) {
console.error('Error reading value:', e);
}
};
export const removeData = async (key) => {
try {
await AsyncStorage.removeItem(key);
} catch (e) {
console.error('Error removing data:', e);
}
};
자세한 사용법:
https://react-native-async-storage.github.io/async-storage/docs/api
API | Async Storage
getItem
react-native-async-storage.github.io
📍 Secure Store
key-value 기반의
데이터를 암호화하고,
저장하고 불러올 수 있도록 하는 라이브러리이다.
데이터를 암호화하여 저장하기 때문에, 보안상 문제가 될 정보들 저장에 적합하다!
설치
npx expo install expo-secure-store
사용법
SecureStore.setItem() , SecureStore.getItem() 등의 메소드를 통해 데이터를 저장, 불러올 수 있다.
SecureStore.setItemAsync() , SecureStore.getItemAsync() 의 경우 비동기적으로 동작하기 때문에 Promise를 반환하는데, then이나 catch 메서드를 사용하여 결과를 처리하거나, async/await 문법을 사용하여 비동기적으로 처리한다.
AsyncStorage와 마찬가지로 string 데이터만 저장할 수 있으므로, 그외 타입 데이터는 직렬화 - 파싱하는 과정을 거쳐야 한다.
JSON.stringify() 를 통해 직렬화하여 저장하고, JSON.parse() 로 파싱하여 불러와야 한다.
import * as SecureStore from 'expo-secure-store';
export const storeSecureData = async (key, value) => {
try {
const jsonValue = JSON.stringify(value);
await SecureStore.setItemAsync(key, jsonValue);
} catch (e) {
console.error('Error storing secure data:', e);
}
};
export const getSecureData = async (key) => {
try {
const jsonValue = await SecureStore.getItemAsync(key);
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch (e) {
console.error('Error reading secure value:', e);
}
};
자세한 사용법:
https://docs.expo.dev/versions/latest/sdk/securestore/
SecureStore
A library that provides a way to encrypt and securely store key-value pairs locally on the device.
docs.expo.dev
따라서, 첫 진입 여부를 묻는 Device ID, 로그인시 아이디 저장과 관련된 User ID, isUserIdSaved와 같은 일반적인 데이터는 Async Storage에서 관리하고,
Authentication & Authorization 패턴을 위한 Access Token, Refresh Token과 Expo Notification을 위한 Expo Token과 같은 데이터는 보안상 문제가 될 수 있으므로 Secure Store로 관리한다!
참고
https://react-native-async-storage.github.io/async-storage/docs/api
https://docs.expo.dev/versions/latest/sdk/securestore/