4.6.4.3 todos 불러오기

이번에는 앱을 가동할 때 AsyncStorage에 저장한 todos를 불러와서 상태를 업데이트해주겠습니다. App이 마운트될 때 AsyncStorage의 getItem 메서드를 사용하면 됩니다. 방금 배운 useEffect를 또 활용하면 되겠죠?

App.js - App 컴포넌트

function App() {
  const today = new Date();

  const [todos, setTodos] = useState([
    {id: 1, text: '작업환경 설정', done: true},
    {id: 2, text: '리액트 네이티브 기초 공부', done: false},
    {id: 3, text: '투두리스트 만들어보기', done: false},
  ]);

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

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

(...)