4.6.4.4 AsyncStorage를 사용하는 코드 추상화시키기

리액트 네이티브 프로젝트에서 AsyncStorage를 사용할 때는 방금 사용한 것처럼 직접 사용하지 않고 코드를 한번 추상화시켜서 사용할 것이 권장합니다. 그 이유는 추후 key 값이 바뀔 수도 있고, AsyncStorage가 아닌 다른 방식을 통해 데이터를 저장할 수도 있는데 이러한 상황에서 유지보수하기가 더욱 쉬워지기 때문입니다.

프로젝트 최상위 디렉터리에 storages 디렉터리를 만들고, 그 안에 todosStorages.js 파일을 생성하세요.

storages/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');
      }

      const savedTodos = JSON.parse(rawTodos);
        return savedTodos;
      } 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;