[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

 

 

📍 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

 

 

 

따라서, 첫 진입 여부를 묻는 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/