[react-native] todoList에 AsyncStorage 적용

 어제 작성한 todoList App이 종료됐다가 다시 켜져도 이전에 데이터를 가지고 있을 수 있도록, AsyncStorage를 적용하여 간단한 데이터를 가지고 있을 수 있도록 해보자.

 

기존 코드를 다시 작성하지는 않으려고 하니, 기존 코드를 확인하려면 여기로 가서 확인하자.

---

우선, App.js에서 useEffect Hook을 사용하여 아래와 같이 저장과 불러오기 기능을 직접 추가한다.

 

◎App.js

(...)

/* 데이터 불러오기 */
  useEffect(() => {
    const load = async () => {
      try {
        const rawTodos = await AsyncStorage.getItem('todos');
        const savedTodos = JSON.parse(rawTodos);
        setTodos(savedTodos);
      } catch (e) {
        console.log('Failed to load todos');
      }
    };
    load();
  }, []);
  /* 데이터 저장 */
  useEffect(() => {
    async function save() {
      try {
        await AsyncStorage.setItem('todos', JSON.stringify(todos));
      } catch (e) {
        console.log('Failed to save todos');
      }
    }
    save();
  }, [todos]);
  
(...)

 

주의할 점은 useEffect는 등록된 순서대로 호출되기 때문에, 반드시 저장 함수가 불러오기 함수보다 뒤에 있어야 한다는 것이다.

---

위와 같이 직접 AsyncStorage를 호출하여 사용할 수도 있지만, 일반적으로는 프로젝트에서 AsyncStorage를 사용할 때는 코드를 한번 추상화시켜서 사용할 것이 권장된다. 

 

즉, todosStorages.js와 같은 파일을 하나 생성하여 AsyncStorage를 호출하는 함수를 따로 작성해둔다는 것이다.

 

◎storage/todosStorage.js

import AsyncStorage from '@react-native-community/async-storage';
const key = 'todos';

const todosStorage = {
  async get() {
    try {
      const rawTodos = await AsyncStorage.getItem(key);

      if (!rawTodos) {
        throw new Error('No saved todos');
      }
    } catch (e) {
      throw new Error('Failed to load todos');
    }
  },
  async set(data) {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      throw new Error('Failed to save todos');
    }
  },
};

export default todosStorage;

 

◎App.js

(...)

/* 데이터 불러오기 */
  useEffect(() => {
    todosStorage.get().then(setTodos).catch(console.error);
  }, []);
  /* 데이터 저장 */
  useEffect(() => {
    todosStorage.set(todos).catch(console.error);
  }, [todos]);
  
  (...)

 

한번 추상화하여 사용하면, 기능을 직접 수행하는 App.js 쪽의 코드가 훨씬 간결해진다.

---

Android 에서 AsyncStorage 최대 용량 설정

 기본적으로 안드로이드에서 AsyncStorage의 최대 용량은 6MB로 설정돼있는데, 아래 설정 파일을 수정하면 그 용량을 변경할 수 있다.

 

◎android/gradle.properties

(...)
AsyncStorage_db_size_in_MB=10

 

---

AsyncStorage는 설정도 매우 간단하고, 사용하기도 굉장히 편하다.

 

하지만 문자열 타입으로 데이터를 저장하기 때문에 데이터의 규모가 커지면 그 성능이 다른 DB에 비하여 매우 떨어지고, 치명적으로 검색이나 정렬 기능이 지원이 안된다.(...?) 

 

아주 단순하고 소규모인 데이터를 다룰 때나 사용하지, 그 외에는... 따로 사용할 일이 없을 거 같다.