[React Native] Todo List 만들기 - AsyncStorage

AsyncStorage 사용하기

설치

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

import

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

todos 저장하기

// App.js

// 첫 렌더링 시 asyncStorage에서 todos 가져오기
useEffect(() => {
  const getTodos = async () => {
    try {
      const respTodos = await AsyncStorage.getItem('todos');
      setTodos(JSON.parse(respTodos) ?? []);
    } catch (e) {
      console.log(e);
    }
  };
  getTodos();
}, []);

// todos 변경 시 asyncStorage에 todos 저장하기
useEffect(() => {
  const storeTodos = async () => {
    try {
      const jsonTodos = JSON.stringify(todos);
      await AsyncStorage.setItem('todos', jsonTodos);
    } catch (e) {
      console.log(e);
    }
  };
  if (todos.length > 0) storeTodos();
}, [todos]);

category 저장하기

// Categories.jsx

// 첫 렌더링 시 AsyncStorage에서 category 가져오기
useEffect(() => {
  const getCategory = async () => {
    try {
      const respCategory = await AsyncStorage.getItem('category');
      setCategory(respCategory ?? 'JavaScript');
    } catch (e) {
      console.log(e);
    }
  };
  getCategory();
}, []);

// category 변경 시 AsyncStorage에 저장하기
useEffect(() => {
  const storeCategory = async () => {
    try {
      await AsyncStorage.setItem('category', category);
    } catch (e) {
      console.log(e);
    }
  };
  storeCategory();
}, [category]);

References

• Installation | Async Storage