To-Do App (3)

1. 데이터 저장하기

• 데이터 저장하기 : async-storage
  https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/
  로컬 스토리지에 데이터를 저장하여 새로고침 하여도 데이터가 유지된다.

// App.js
const storeData = async task => {
    try {
      await AsyncStorage.setItem('tasks', JSON.stringify(task));
      setTasks(task);
    } catch (e) {}
  };

  const getData = async () => {
    try {
      const loadedData = await AsyncStorage.getItem('tasks');
      setTasks(JSON.parse(loadedData || {}));
    } catch (e) {}
  };

• 이전에 Task 수정, 추가, 삭제시 작성했던 코드 수정

// setTasks({ ...tasks, ...newTaskObject });
   storeData({ ...tasks, ...newTaskObject });

• 앱 시작시 데이터 불러오기 : AppLoading
  https://docs.expo.dev/versions/v44.0.0/sdk/app-loading/

const [isReady, setIsReady] = useState(false);

return isReady ? (
    // 기존 코드
  ) : (
    <AppLoading
      startAsync={getData}
      onFinish={() => {
        setIsReady(true);
      }}
      onError={() => {}}
    />
  );

2. 로딩화면과 아이콘

• 아래의 파일을 변경하면 가능하다.

// app.json
{
  "expo": {
    "name": "my-first-expo",
    "slug": "my-first-expo",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",  // 아이콘
    "splash": {   // 로딩이미지
      "image": "./assets/splash.png",  
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {    // 안드로이드에서 아이콘 이미지
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}