간단하게 사용할 수 있는 AsyncStorage에 대해 소개 해보려한다.

AsyncStorage란 ?

AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value형식의 저장소다.
iOS에서는 네이티브 코드로 구현되어 있고, 안드로이드에서는 네이티브 코드와 SQLite 기반으로 구현되어 있다.
AsyncStorage는 브라우저에서 사용하는 로컬 스토리지와 유사한 느낌이다.
값을 저장할 때는 string타입으로 저장해야하고 getItem, setItem, removeItem, clear등의 로컬스토리지에서 사용하는 메서드와 같은 이름을 가진 메서드들도 존재한다.
로컬스토리지와 큰 차이점이라면 AsyncStorage는 비동기로 작동한다.
값을 조회하거나 설정할 때 Promise를 반환한다.
(여기서 Promise 개념은 생략한다)

AsyncStorage 설치하기

이전에는 AsyncStorage가 RN 프로젝트에 내장되어 있어서 별도로 설치할 필요가 없었지만,
해당 기능을 커뮤니티에서 유지보수하면서 라이브러리로 분리되었다고 한다.

아래 명령어를 통해 라이브러를 설치할 수 있다.

yarn add @react-native-community/async-storage

이후 iOS에서는 다시 pod install을 해줘야한다.
설치 후에는 yarn ios, yarn android 커맨드를 실행한다.

AsyncStorage 기본 사용법

불러오기

AsyncStorage를 사용하고 싶은 컴포넌트에 아래 코드를 import한다.

import AsyncStorage from '@react-native-community/async-storage'

저장하기

특정 값을 저장할 때는 setItem 메서드를 사용한다.

  const save = async () => {
    try {
      await AsyncStorage.setItem('key', 'value')
    } catch (error) {
      
    }
  }
  // 값을 저장할 때는 문자열 타입이어야 한다. 만약 객체 및 배열 타입을 저장하려면 다음과 같이
  // JSON.stringify 함수를 사용해야한다.
  await AsyncStorage.setItem('todos', JSON.stringify(todos));

불러오기

특정 값을 불러올 때는 getItem 메소드를 사용한다.

  const load = async () => {
    try {
      const value = await AsyncStorage.getItem('key')
      // value 사용 코드
    } catch (error) {
      //오류 예외처리
    }
  }
  // 만약 객체 및 배열을 불러오려면 JSON.parse 함수를 사용해 문자열을 JSON으로 변환해야한다.
const rawTodos = await AsyncStorage.getItem('todos');
const todos = JSON.parse(rawTodos);

초기화하기

AsyncStorage에 있는 모든 값을 초기화하고 싶다면 아래처럼 clear 메소드를 사용한다.

 const clearAll =async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    //오류 예외처리
  }
 }

출처 / 참고 : 리액트를 다루는 기술