React Native) AsyncStorage로 데이터 유지하기

key-value 형식의 native 저장소 사용하기

---

 

---

useEffect 사용하기

컴포넌트의 특정 상태가 바뀔때 마다 호출되는 Hook 함수(컴포넌트가 가장 처음 렌더링 되었을 때도 호출됨)

import React, {useEffect} from 'react';

useEffect() => {
	console.log(todos);
}, [todos]);

- 첫번째 인자 : 주시하고 싶은 값이 바뀌었을 때 호출하고 싶은 함수
- 두번째 인자 : 주시하고 싶은 값(배열 안에 넣어서 입력)

---

 

AsyncStorage 적용하기

해당 메서드는 async 작동함수임에 따라 Promise를 활용함
이에 따라, async와 await 키워드를 붙여서 함수를 활용해야 함
(자세한 내용은 javascript Promise 관련 자료 참고 필요)

AsyncStorage 주요 메소드
- getItem : 불러오기
- setItem : 저장하기

* getItem 활용 예제)

const key = 'todos';

useEffect(() => {
    async function load() {
        try {
          const rawTodos = await AsyncStorage.getItem(key);
          const savedTodos = JSON.parse(rawTodos);
          return savedTodos;
        } catch (e) {
          throw new Error('Failed to load todos');
        }
      }
  }, []);

* setItem 활용 예제)

const key = 'todos';
const [data, setData] = useState([
	(...)
]);

useEffect(() => {
    async function save(data) {
        try {
          await AsyncStorage.setItem(key, JSON.stringify(data));
        } catch (e) {
          throw new Error('Failed to load todos');
        }
      }
  }, [data]);

보통 컴포넌트를 추상화하여 많이 활용함
문자열 타입만 저장됨(데이터 많아질수록 속도 느려짐)
- 데이터 커질 때 사용할 수 있는 대안 : realm, react-native-sqlite-storage

---

 

AsyncStorage 최대 용량 설정하기(Android만 가능)

기본 크기 : 6MB
android/gradle.properties 파일에 아래 코드 추가

(...)
AsyncStorage_db_size_in_MB=10

* iOS는 최대 용량이 따로 정해져 있지 않음

AsyncStorage 활용