노마드 코더 RN 왕초보 개발기 RN 배우기! 과정기 5일 차

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)

GitHub - SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용

 

3.5강

• AsyncStorage 설치하기

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

• 임포트 하기

import AsyncStorage from "@react-native-async-storage/async-storage";

• 저장하기

AsyncStorage.setItem(STORGE_KEY, JSON.stringify(todos));

1. STORGE_KEY : 저장할 키 값 ,string 값
2. JSON.stringify(todos) : 오브젝트를 string으로 수정해서 저장

 

• 불러오기

const s = await AsyncStorage.getItem(STORGE_KEY);

if (s) {
      setTodos(JSON.parse(s));
    }

3.6강

• 삭제 기능 만들기

const deleteToDo = async (key) => {
    const newTodo = { ...toDos };
    delete newTodo[key];
    setTodos(newTodo);
    await saveTodos(newTodo);
  };

1. 새로운 객체를 만들어서 키값에 해당하는 todo만 제거
2. 그 후 저장

• Alert.alert 사용하기

Alert.alert("title" , [ { text:"Cancel" } , { text: "OK" , onPress : () => {} }]);

/**static alert (
  title: string,
  message?: string,
  buttons?: AlertButton[],
  options?: AlertOptions,
*/
);

1. ios에서만 사용 가능한 AlertButtonStyle이 있음.

 

• Alert.prompt 사용하기 (ios에서만 동작)

Alert.prompt("title");

/** static prompt: (
  title: string,
  message?: string,
  callbackOrButtons?: ((text: string) => void) | AlertButton[],
  type?: AlertType,
  defaultValue?: string,
  keyboardType?: string,
);*/

• 삭제 기능 수정하기

 const deleteToDo = (key) => {
    Alert.alert("삭제하기", "정말 삭제 하시겠습니까?", [
      { text: "취소" },
      {
        text: "삭제",
        onPress: () => {
          const newTodo = { ...toDos };
          delete newTodo[key];
          setTodos(newTodo);
          saveTodos(newTodo);
        },
      },
    ]);
  };

3.8강 Code Challenge

• 앱 재실행시, 마지막 상태의 Work 또는 Travel 기억하기

const toggleWorking = () => {
    const worked = !working;
    setWorking(!working);
    AsyncStorage.setItem(WORKING, JSON.stringify(worked));
  };

const loadTodos = async () => {
  const work = await AsyncStorage.getItem(WORKING);

  if (work) {
    setWorking(JSON.parse(work));
  }

  const s = await AsyncStorage.getItem(STORGE_KEY);

  if (s) {
    setTodos(JSON.parse(s));
  }
};

• Todo에 완료 기능 추가하기

const confirmToDo = (key) => {
    const newTodo = { ...toDos };
    newTodo[key].confirm = !newTodo[key].confirm;
    setTodos(newTodo);
    saveTodos(newTodo);
  };

// ...

<TouchableOpacity key={key} onPress={() => confirmToDo(key)}>
  <View style={styles.toDo}>
    <Text
      style={{
        ...styles.toDoText,
        textDecorationLine: toDos[key].confirm
        ? "line-through"
        : "none",
    }}>
      {toDos[key].text}
    </Text>

// ...

</TouchableOpacity>

• Todo에 수정 기능 추가하기

const [editKey, setEditKey] = useState(null);
const [editText, setEditText] = useState("");

const onChangeEditText = (payload) => setEditText(payload);

//...

const changeEditKey = (key) => {
  setEditKey(key);
  setEditText(toDos[key].text);
};

const EditToDo = () => {
  const newTodo = { ...toDos };
  newTodo[editKey].text = editText;
  setTodos(newTodo);
  saveTodos(newTodo);
  setEditKey(null);
};

// ...

{editKey !== key ? (
  <Text
  style={{
    ...styles.toDoText,
    textDecorationLine: toDos[key].confirm
    ? "line-through"
    : "none",
    }}
  >
    {toDos[key].text}
  </Text>
  ) : (
  <TextInput
  onSubmitEditing={EditToDo}
  returnKeyType="done"
  value={editText}
  onChangeText={onChangeEditText}
  placeholder={working ? "add Todo" : "add Travel"}
  style={styles.editInput}
  />
)}