[React-Native] ToDo앱 만들기 - 데이터 CRUD

🔸 데이터 핸드폰 저장소에 저장하고 불러오기

• expo AsyncStroage라는 모듈 사용

• 공식문서에서 설치문 터미널 입력

• 암호화되어있지 않아서 중요 정보는 넣지 말쟈

• 브라우저의 local storage처럼 작동
  => await과 async 사용해야한다는 차이점

• 저장

  // string 저장
  const storeData = async (value) => {
    try {
      await AsyncStorage.setItem('@storage_Key', value)
    } catch (e) {
      // saving error
    }
  }
  
  // object 저장
  const storeData = async (value) => {
    try {
      const jsonValue = JSON.stringify(value)
      await AsyncStorage.setItem('@storage_Key', jsonValue)
    } catch (e) {
      // saving error
    }
  }

• 로드

  const loadToDos = async () => {
    try {
      const s = await AsyncStorage.getItem(STORAGE_KEY)
      const loadedObj = JSON.parse(s);
      setToDos(loadedObj);
    }catch (e) {
      console.log(e)
    }
  }
  // 처음 실행시 불러오는 함수 실행
  useEffect(()=>{
    loadToDos();
  }, [])

• 공식문서
  => https://docs.expo.dev/versions/latest/sdk/async-storage/
  
  

🔸 삭제 기능 만들기

• 삭제 버튼 만들어주고
• 삭제 함수 만들고
• onPress에 삭제 함수 넣어주기
• 삭제 함수는 기존 할일 목록 deep copy해서 id를 활용해 삭제하고 다시 set하는 방식

  async () => {
    const newToDos = {...toDos};
    delete newToDos[key];
    setToDos(newToDos);
    await saveToDos(newToDos);
  }

• Alert 사용해보기

  const deleteToDo = (key) => {
    Alert.alert("삭제하시겠습니까?", "진짜루?", [
      {text : "Cancel"},
      {
        text : "Delete", 
        style : "destructive",
        onPress : async () => {
          const newToDos = {...toDos};
          delete newToDos[key];
          setToDos(newToDos);
          await saveToDos(newToDos);
          }
        }
    ]);
    return
  }

• 공식문서
  => https://reactnative.dev/docs/alert
  
  

🔸 수정 기능 만들기

• 각각의 toDo에서 수정 버튼 클릭을 통해 해당 항목만 업데이트
• Alert 창이 뜨는 형식이 아닌 글 위치가 TextInput으로 변하는 형태
• Idea
  => 수정버튼을 만들고, 누르면 수정할 ID를 State로 저장
  => toDo 리스트 렌더링 시 수정할 ID와 일치 여부에 따라 기본 텍스트 or 수정 Text Input 형태를 렌더링
  => 수정 Text Input의 입력값 State에 저장, onSubmitEditing 함수에 key 넘겨주기
  => onSubmitEditing 함수 선언 : toDo 리스트 Deep Copy 후 넘겨받은 key값으로 해당 값 수정, 다시 저장
  => 수정할 아이디와 수정 TextInput State 초기화

// States
const [editID, setEditID] = useState("");
const [editText, setEditText] = useState("")
const onChangeEditText = (payload) => {setEditText(payload)}

// Edit Function
const editToDos = async (key) => {
  const editToDos = {...toDos};
  editToDos[key].text = editText;
  setToDos(editToDos);
  setEditID("");
  setEditText("");
  await saveToDos(editToDos);
}

...

return(

...

// rendering
{
  key == editID ? (
    <TextInput
      style={styles.editInput}
      placeholder={toDos[key].text}
      keyboardType="default"
      returnKeyType="done"
      onChangeText={onChangeEditText}
      value={editText}
      onSubmitEditing={()=>{editToDos(key)}}
    >
    </TextInput>
  ) : (
      <Text style={styles.toDoText}>{toDos[key].text}</Text>
  )
}

...

)