React Native - Storage 저장(AsyncStorage / KeyChain)

1. AsyncStorage

React Naitve에서 간단한 데이터를 저장하고 관리하기 위한 Key-Value 저장 시스템으로 AsyncStroage가 있다.

데이터 용량으로는 기본은 6mb로 유지해야 될 간단한 정보(테마, 다크모드 등)를 저장하는 것이 좋다.

특징은 아래와 같다.

• 비동기
• 문자열만 저장
• 앱 전체에 적용
• 암호화 x
• 영구 저장

https://www.npmjs.com/package/@react-native-async-storage/async-storage

https://www.npmjs.com/package/@react-native-async-storage/async-storage

 

 

a. 설치

npm install @react-native-async-storage/async-storage
#or
yarn add @react-native-async-storage/async-storage

 

 

b. 코드

// asyncStorage.ts

// 저장
const setItem = async () => {
	await AsyncStorage.setItem(key, value);
}

// 읽기
const getItem = async () => {
	await AsyncStorage.getItem(key)
}

// 삭제
const removeItem = async () => {
	await AsyncStorage.removeItem(key)
}

 

 

2. react-native-keychain

암호화가 필요한 데이터나 토큰같이 민감한 데이터를 저장할 때 이용하는 것이 react-native-keychain 이다.

keychain/keystore 액세스 형태로 ios 및 Android에서 제공하는 기본 암호화 메커니즘을 사용하여 정보를 저장 가능하다.

 

공식 문서에 따르면 암호화 레벨을 아래와 같이 제공한다.

1. High Security (생체 인증 포함) - 비밀번호, 개인 데이터, 중요한 키
   • AES_GCM : 생체 인식 보호 기능이 있는 대칭 암호화
   • RSA : 생체 인식 보호 기능이 있는 비대칭 암호화
2. Medium Security (인증 미포함) - 캐시된 데이터, 민감하지 않은 암호화된 데이터
   • AES_GCM_NO_AUTH : 생체 인식 요구 사항이 없는 대칭 암호화
3. Legacy/Deprecated - 권장하지 않음
   • AES_CBC, FB(페이스북 컨실)

 

https://www.npmjs.com/package/react-native-keychain

react-native-keychain

 

a. 설치

npm install react-native-keychain
#or
yarn add react-native-keychain

 

 

b. 코드

// keychain.ts

import Keychain, {
  ACCESS_CONTROL,
  ACCESSIBLE,
  STORAGE_TYPE,
} from 'react-native-keychain';

// 저장
export const setSecureValue = async (
  server: string,
  key: string,
  value: string,
) => {
  try {
    await Keychain.setInternetCredentials(server, key, value, {
      accessControl: ACCESS_CONTROL.BIOMETRY_ANY,
      accessible: ACCESSIBLE.WHEN_UNLOCKED,
      storage: STORAGE_TYPE.AES_GCM_NO_AUTH,
    });
  } catch (error) {
    console.error(error);
  }
};

// 읽기
export const getSecureValue = async (server: string) => {
  try {
    const credentials = await Keychain.getInternetCredentials(server);
    if (credentials) {
      return credentials;
    }
    return null;
  } catch (error) {
    console.error(error);
  }
};

// 삭제
export const removeSecureValue = async (server: string) => {
  try {
    await Keychain.resetInternetCredentials({server});
  } catch (error) {
    console.error(error);
  }
};