[RN] 🚧 asyncstorage 알아보기

 

1. asyncstorage 란 ?

• 모바일 애플리케이션 (iOS 및 Android)에서 데이터를 저장하는 데 사용되는 라이브러리이다.
• AsyncStorage는 React Native 애플리케이션에서 영구적으로 데이터를 저장해야 할 때 주로 사용된다.

 

 

 

2. 🤔 이걸 왜 써야하지 ?

우리는 어플을 종료후에 다시 실행하였을 때 데이터가 남아있지 않은 문제가 생길 수 있다. 

이때 key-value 기반으로 로컬에 데이터를 저장할 수 있게 해주는 라이브러리를 사용할 수 있다. 

즉 로컬 저장소로 애플리케이션의 클라이언트 측 (사용자의 기기) 에 데이터를 저장한다. 

이렇게 하면 어플이 다시 실행될 때 데이터를 복원하는 데 사용이 된다. 

 

🙋🏻‍♀️  * 사용자의 기기에 데이터를 저장하는 이유는 무엇일까 ? ?

우리는 어플을 사용하다보면 개인마다 다른 저장소를 사용하고 싶을 때가 있다.

예를 들어 A와 B 가 동시에 어플을 깔았다고 생각해보자.

 

A는 어플을 깔자마자 회원가입 후 로그인을 진행하였고

B는 아직 회원가입을 하지 않았다고 해보자.

그렇다면 30분 후에 A 는 어플을 바로 실행할 수 있고

B 는 회원가입부터 진행을 해줘야한다. 이렇게 개인마다 개인화된 공간이 다르게 되어 매번 어플을 열 때마다 개인마다 다른 환경을 설정해주고 싶다는 것이다. 

 

혹은..웹툰을 생각해보자. 사람마다 다른 곳에서 읽다가 어플을 중단했을 것이다. 그리고 이런 것이 그대로 남아있는 상태에서 다시 작업을 이어나가게끔 하고싶다는 것이다.

 

이렇게 사용자가 어디에서 작업을 중단했는지, 이전에 어떤 작업을 했는지 를 사용자의 로컬에 저장함으로써 어플을 다시 열었을 때 해당 상태를 개인마다 다르게 복원하도록 한다.

 

 

 

✔️ 정리해보면 개인화된 설정과 데이터를 로컬에 저장함으로써, 사용자가 항상 자신의 선호도에 맞춘 환경에서 애플리케이션을 사용할 수 있도록 지원하는 것이 가능해조도록 로컬 저장소를 활용한다. 

 

---

 

 

3. 특징

• localstorage와 마찬가지로, 문자열 데이터만 사용이 가능
• 따라서 JSON.stringify 메서드와 JSON.parse 메서드의 사용이 필요하다.
• 하지만 AsyncStorage는 localstorage와는 다르게 비동기 처리가 필요하다.

---

4. 기본 사용법

4-1. 라이브러리 사용

// 설치
@react-native-async-storage/async-storage

// 라이브러리 임포트
import {AsyncStorage} from 'react-native';

 

4-2. 데이터 저장 - setItem 

const storeData = async () => {
  try {
    await AsyncStorage.setItem(
    '@storage_Key', 
    'stored value'
    );
  } catch (error) {
    // 저장 실패 처리
  }
};

 

async 를 사용하여 비동기처리를 해주고

setItem 을 사용하여 key-value 로 한쌍으로 저장해준다. 이때 값은 문자열로 변환되어야한다.

 

예를들어 유저에 대한 정보를 저장한다고 쳐보자. 

// 유저에 대한 객체 정보 문자열로 반환해서 저장하기
const user = {
  name: 'John',
  age: 30
};
await AsyncStorage.setItem('user', JSON.stringify(user));

 

이렇게 유저와 유저에 대한 정보를 Key 와 value 값으로 저장할 수 있고

value 값은 현재 튜플로 저장이 되어있기 때문에

JSON.stringfy 를 활용하여 문자열로 변환을 해서 저장해주도록 한다.

 

혹은 사용자 만의 토큰을 저장한다고 할 때도 유용하게 사용할 수 있다.

(3) 사용자 토큰 저장하기

// 사용자 토큰 저장하기
const token = 'abc123';
await AsyncStorage.setItem('authToken', token);

 

 

이렇게 key - value 형태로 사용자의 토큰도 저장할 수 있다.

 

4-3. 데이터 가져오기 - getItem 

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // 데이터가져옴!
      console.log(value);
    }
  } catch (error) {
    // 에러처리코드
  }
};

 

또한 데이터를 가져올 때도 유용하게 사용할 수 있다. TASKS 라는 키에 저장된 데이터를 비동기적으로 가져올 수 있는데 이때 데이터가 문자열로 반환이 된다. 사용자가 저장해둔 작업목록을 불러와 렌더링할 때 사용할 수 있다. 

 

4-4. 데이터삭제 -removeItem

const removeData = async () => {
  try {
    await AsyncStorage.removeItem('@storage_Key');
  } catch(error) {
    // 삭제 실패 처리
  }
};

 

 

 

특정 키에 해당하는 데이터를 삭제하는 데 사용된다.

이 메서드를 호출하면 해당 키와 연결된 데이터가 로컬 저장소에서 제거된다.

따라서 여기서도.. storage_key 에 저장되었던 모든 value 값들이 제거된다는 것이다.

 

 

4-5. 모든 키 가져오기 - getAllKeys

const getAllKeys = async () => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    console.log(keys);
  } catch(error) {
    // 오류 처리
  }
};

 

모든 키의 배열을 반환한다.

이를 통해 어떤 데이터가 저장되어 있는지 확인할 수 있다.

 

4-6. 모든 데이터 삭제 - clear

await AsyncStorage.clear();

 

• clear 메서드는 AsyncStorage에 저장된 모든 데이터를 삭제한다.
• 앱의 로컬 저장소가 완전히 초기화되며, AsyncStorage에 저장된 모든 키와 값이 제거된다.
• 모든 데이터를 삭제하기 때문에 백업을 미리 해두거나 신중하게 사용해야함

 

 

4-7. 저장된 데이터 업데이트 -mergeItem

•  이미 저장된 데이터를 업데이트할 때 사용.
• 기존의 값을 덮어쓰지 않고, 새로운 값을 기존 값에 병합(merge)한다.
• 이 기능은 특히 객체 데이터를 다룰 때 유용.

const user = {
  age: 30,
  name: 'hihilong'
};
await AsyncStorage.setItem('user', JSON.stringify(user));

const updatedInfo = {
  age: 31
};
await AsyncStorage.mergeItem('user', JSON.stringify(updatedInfo));

 

 

이렇게 하면... user 라는 키에 저장된 객체 데이터에 새로운 정보 (age: 31) 을 병합하게 된다. 기존의 name: hihilong 값은 유지되면서 age 만 업데이트 시킬 수 있다. 

 

 

 

 

 

reference

https://reactnative.dev/docs/asyncstorage