[React-Native CLI] React Native Encrypted Storage 사용하기

1. Encrypted Storage 설치

먼저 Encrypted Storage 패키지를 설치

npm install react-native-encrypted-storage

yarn add react-native-encrypted-storage

만약 React Native CLI 프로젝트를 사용 중이라면, iOS를 위해 추가적으로 아래 명령어를 실행

npx pod-install ios

---

2. Encrypted Storage란?

Encrypted Storage는 웹의 Local Storage와 유사한 기능을 제공하지만, 차이점도 존재

• 비동기적 처리: async/await 문법 사용
• 보안성: 데이터를 자동으로 암호화하여 저장하고, 필요 시 복호화하여 읽기

이를 통해 민감한 데이터를 안전하게 관리가 가능

---

3. 기본 사용법

값 저장 함수

const setEncryptStorage = async <T>(key: string, data: T) => {
  await EncryptedStorage.setItem(key, JSON.stringify(data));
};

값 가져오기 함수

const getEncryptStorage = async (key: string) => {
  const storedData = await EncryptedStorage.getItem(key);

  return storedData ? JSON.parse(storedData) : null;
};

값 삭제 함수

const removeEncryptStorage = async (key: string) => {
  const data = await getEncryptStorage(key);
  if (data) {
    await EncryptedStorage.removeItem(key);
  }
};

---

4. 전체 코드

import EncryptedStorage from 'react-native-encrypted-storage';

const setEncryptStorage = async <T>(key: string, data: T) => {
  await EncryptedStorage.setItem(key, JSON.stringify(data));
};

const getEncryptStorage = async (key: string) => {
  const storedData = await EncryptedStorage.getItem(key);

  return storedData ? JSON.parse(storedData) : null;
};

const removeEncryptStorage = async (key: string) => {
  const data = await getEncryptStorage(key);
  if (data) {
    await EncryptedStorage.removeItem(key);
  }
};

export {setEncryptStorage, getEncryptStorage, removeEncryptStorage};