[RN] study 5week / 할일 목록 만들기 ②-③ AsyncStorage

React Navtive 스터디 5week

도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗]

(4장 할일 목록 만들기 ②-③)

 

4.1 불변성을 지키면서 객체와 배열 업데이트하기

4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기

4.3 새 항목 등록하기

4.4 할일 완료 상태 토글하기

4.5 항목 삭제하기

4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기

4.7 정리

---

AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소.

iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드에서는 네이티브 코드와 SQLite를 기반으로 구현되어 있음. 

브라우저에서 사용하는 locatStorage와도 꽤 비슷. 값을 저장할 때는 문자열 타입으로 저장해야 하고, 같은 이름을 가진 메서드 존재.

차이점은 AsyncStorage는 비동기적으로 작동한다는 것. 값을 조회하거나 설정할 때 Promise를 반환함.

 

4.6.1 Promise가 무엇인가요?

Promise는 자바스크립트에서 비동기적 작업을 편하게 관리하도록 도와주는 객체.

4.6.2 AsyncStorage 설치

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

iOS에서는 다시 pod install 해줘야

cd ios
pod install

---

4.6.3 AsyncStorage 기본 사용법

4.6.3.1 불러오기

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

4.6.3.2 저장하기

const save = async () => {
    try {
      await AsyncStorage.setItem('key', 'value');
    } catch (error) {
      //오류 예외 처리
    }
  }

값은 문자열. 객체 및 배열 타입을 저장하려면 JSON.stringify 함수 사용해야 함.

await AsyncStorage.setItem('todos', JSON.stringify(todos));

4.6.3.3 불러오기

 const load = async () => {
    try {
      const value = await AsyncStorage.getItem('key');
      //vaule를 사용하는 코드
    } catch (error) {
      //오류 예외 처리
    }
  }

객체 및 배열을 불러오려면 JSON.parse 로 문자열을 JSON으로 변환해야 함.

const todos = JSON.parse(value);

4.6.3.4 초기화하기

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

---

4.6.4 AsyncStorage 적용하기

 //저장
  useEffect(() => {
    async function save() {
      try {
        await AsyncStorage.setItem('todos', JSON.stringify(todos));
      } catch (e) {
        console.log('Failed to save todos');
      }
    }
    save();
  }, [todos]);

useEffect에 등록한 함수를 async 함수로 만들지 않고 내부에 async 함수를 따로 선언한 다음 호출한 이유

=> useEffect에 등록한 함수는 async 키워드를 붙이면 안 된다!! useEffect에는 정리(cleanup) 기능이 있는데, 함수에서 Promise를 반환하면 이 기능과 충돌이 난다. 정리 기능은 컴포넌트가 언마운트되거나 컴포넌트가 업데이트되기 전에 특정 코드를 실행할 수 있는 기능으로, useEffect에서 함수 타입의 값을 반환하면 이 기능을 사용할 수 있다. 

useEffect(() => {
    async function load() {
      try{
        const rawTodos = AsyncStorage.getItem('todos');
        const savedTodos = JSON.parse(rawTodos);
        setTodos(savedTodos);
      } catch (e){
        console.log('Failed to load todos');
      }
    }
    load();
  }, []);

데이터를 불러와서 상태를 업데이트하는 코드를 작성할 때는 꼭 기존의 todos를 저장하는 useEffect보다 상단 위치에 코드를 작성해야 한다. useEffect는 등록된 순서대로 작동하는데, 저장하는 useEffect가 먼저 호출되면 todos의 초깃값을 저장해버린 다음에 불러오기가 진행되므로 초깃값만 불러오게 된다.

 

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

//storages/todosStorage.tsx

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) {
      console.log('Failed to load todos');
    }
  },
  async set(data: any) {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.log('Failed to save todos');
    }
  },
};

export default todosStorage;

//App.tsx

useEffect(() => {
    todosStorage.get().then(setTodos).catch(console.error);
  }, []);

  useEffect(() => {
    todosStorage.set(todos).catch(console.error);
  }, [todos]);

4.6.4.5 안드로이드에서 AsyncStorage 최대 용량 설정하기

안드로이드에서 AsyncStorage의 최대 크기는 기본 6MB.

최대 용량 늘리려면 android/gradle.properties 파일에 아래 코드 추가 (10MB로)

AsyncStorage_db_size_in_MB=10

iOS는 최대 용량이 따로 지정되어 있지 않다.

 

4.6.4.6 AsyncStorage의 제한

AsyncStorage는 비교적 소규모 데이터를 다룰 때 사용하는 것이 좋다. 문자열 타입으로만 저장가능해서 데이터가 많아질수록 속도가 느려짐. 캐싱시스템, 스로틀링, 페이지네이션 구현 등으로 성능 최적화 가능하지만 한계가 있다. 그리고 검색 또는 정렬 기능 지원 X. 

데이터 규모가 커지면 realm와 react-native-sqlite-storage가 있다. (안드로이드의 AsyncStorage는 이미 SQLite를 사용하긴 하지만, react-native-sqlite-storage를 사용하면 인덱싱 기능을 지원받을 수 있고, 더욱 다양한 방식으로 데이터를 저장,조회할 수 있다.)