[ReactNative] AsyncStorage로 데이터 저장하기

Today, What I learned?

웹이나 앱이나 어떤 정보들을 로컬 데이터베이스에 저장해야 하는 경우가 있다.

투두리스트를 왕창 만들고 있으니 이걸 예시로 들자면,

새로고침하거나 종료 후 다시 실행했을 때 전에 작성했던 리스트가 남아있는 것이 필수!

브라우저에 로컬 스토리지가 있다면, React Native에서는 AsyncStorage를 이용해서 저장해볼 수 있다.

 

 

Async Storage

공식 문서에 들어가 보면 아래와 같은 내용이 있다.

 

Data storage system for React Native.

리액트 네이티브를 위한 데이터 스토리지!

 

저장하거나 불러오는 방식이 Local Storage를 사용하는 방식과 거의 흡사하다.

 

https://react-native-async-storage.github.io/async-storage/

Async Storage | Async Storage

 

 

설치

npm install @react-native-async-storage/async-storage

설치 후 import 해서 사용하면 된다.

 

 

사용

이름부터가 Async Storage 인 것처럼, async - await를 이용해서 데이터를 저장하고 가져온다.

저장하고 불러오는 방식은 getItem, setItem으로 로컬 스토리지와 동일한 방식이다.
다만 배열이나 객체를 setItem 메서드로 저장하기 위해서는 JSON.parse() 로 가져오고 JSON.stringify()로 저장해야 하는 점이 있었다.

 

getItem

 const getTodos = async () => {
      const allTodos = await AsyncStorage.getItem('todos');
      const currentCategory = await AsyncStorage.getItem('category');

      setTodos(JSON.parse(allTodos));
      setCategory(currentCategory ?? 'js');
    };

 

 

setItem

  const saveTodos = async () => {
      await AsyncStorage.setItem('todos', JSON.stringify(todos));
      await AsyncStorage.setItem('category', category);
    };

 

 

 

적용했을 때 새로고침해도 데이터가 남아있는 모습을 볼 수 있다.

크게 중요하지 않은 데이터이거나, 간단하게 데이터를 저장할 때 사용하면 좋을 것 같다!