[React Native] ToDo App 만들기 - 화면 전환과 데이터 불러오기

이렇게 클릭한 탭에 따라 아래의 화면이 전환 되기를 기대할 것이다.

정말 간단한 해결책이 있었는데 새롭게 추가해 주는 newToDos Object 안에 working 만 간단하게 남겨놓고 이에 따라 삼항 연산자로 조건에 맞게 현재의 working 과 Object 안의 working 이 같은지를 판별해주어 화면에 paint 해주면 된다.

이제 휴대폰에 데이터를 저장해 주어야 한다.

이걸 하려면 expo 로 다시 돌아가야 된다. 왜냐하면 expo 에는 이전에 말했듯이 AsyncStorage 라는 module 이 있기 때문이다.

expo install @react-native-async-storage/async-storage

를 설치해주자.

그리고 expo install 이라는 것은 기본적으로 npm install 과 유사하나 설치 되어 있는 expo의 version 에 맞는 module 을 설치해준다.

https://react-native-async-storage.github.io/async-storage/docs/usage/

또한 이렇게 사용법도 간단해서 await 를 해줘야 하는 것 빼고는 웹에서의 localStorage 란 흡사하다.

key 에 @toDos 를 해줄 수 있다.

각각의 관계에 맞게 await async 도 해주어야 한다.

setItems 는 Promise 를 return 해 줄 것이다. 그래서 await 를 해줘야 하고 함수에는 async 를 해줘야 한다.

동일한 키를 반복해 사용할 거라 이렇게 선언해 주었다.

loadToDos 를 추가하면 끝이다!

useEffect를 쓸때 두번째 인자에는 대괄호를 쓰자!!! 중괄호 썻다가 한참 해맸다.