TIL : Async Storage

Async Storage

( 출처 : 공식문서 )
: async로 된 함수안에서만 사용할 수 있는 Storage

설치하기

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

import

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

setItem()

: 새 데이터를 추가하거나 기존 데이터를 수정하는 데 사용된다.

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('@storage_Key', jsonValue)
  } catch (e) {
    // 에러발생 시 동작할 코드
  }
}

getItem()

: 주어진 key에 대한 데이터가 있으면 해당하는 데이터를 반환한다. 만약 없을 시에는 null을 반환한다.

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('@storage_Key')
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch(e) {
    // 에러발생 시 동작할 코드
  }
}

---

.parse( ) ?

:JSON메서드인 .parse() 는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값 혹은 객체를 생성하는데, 선택적으로 reviver 함수를 인수로 전달하게 되면 결과를 반환하기 전에 변형할 수 있다. ( 출처 : MDN )

const json = '{"person":true, "age":21}';
const obj = JSON.parse(json);

console.log(obj.age); //21

---

오늘 React Native로 to-do-list를 만들던 중, Async Storage를 활용하는 과정에서 어려움을 겪었다. 차례차례 튜터님의 코드를 이해하며 내 코드로 옮기는 도중 아래와 같은 오류가 발생했다.

TypeError: null is not an object (evaluating 'todos.map')

본래 todolist의 내용을 저장하던 state인 todos의 내용이 없어서 .map을 못한다는 내용의 오류였다. 콘솔로 찍어보니 undefined가 찍혔다.
처음에는 변수명 오타일 것이라고 생각해서 계속 다시 써보았는데, 해결이 안되어서 초기에는 빈배열이기 때문에 위와 같은 오류가 뜬 것이 아닐까라고 생각이 들었는데, 이 문제가 맞았다.

그래서 마운팅할 때, 데이터를 불러오는 코드에서

const getData = async () => {
      const res_todos = await AsyncStorage.getItem("todos");
      const res_cate = await AsyncStorage.getItem("category");
      console.log(res_todos, res_cate);
      setTodos(JSON.parse(res_todos) ?? []); // <= 여기 
      setCate(res_cate ?? "javascript");
    };
    getData();
  }, []);

setTodos에 예외처리를 적용하여 해결할 수 있었다.

⭐️ 제발 잊지말자 예외처리 ⭐️