4.6.4 AsyncStorage 적용하기

이제 할일 목록을 AsyncStorage에 저장해 앱을 재시작해도 데이터가 유지되도록 만들어줍시다. 가장 기본적인 방법은 onInsert, onToggle, onRemove 함수에서 setTodos를 호출한 뒤 setItem 메서드도 호출해 데이터를 저장하는 방법입니다.

4.6.4.1 useEffect 사용하기

이를 수행하기 위해 각 함수를 수정하는 것보다 더 좋은 방법이 있습니다. 바로 useEffect라는 Hook 함수를 사용하는 것입니다. 이 Hook 함수를 사용하면 컴포넌트에서 특정 상태가 바뀔 때마다 원하는 코드를 실행할 수 있습니다. 또한, 컴포넌트가 마운트(가장 처음 화면에 나타남)되거나 언마운트(화면에서 컴포넌트가 사라짐)될 때 원하는 코드를 실행할 수도 있습니다.

우선 특정 상태가 바뀔 때마다 특정 함수를 호출하는 예시를 알아보겠습니다. App 컴포넌트에서 다음과 같이 useEffect를 불러오세요.

App.js - 상단

import React, {useState, useEffect} from 'react';