TIL 44. React Native로 Todo List 만들기

crud의 가장 기본인 TodoList를 React Native로 만들어봤다.

---

Create

const [todo, setTodo] = useState([]);

todo가 담길 state를 만든다.

---

const onChangeTodo = (e) => {
    setTodoInput(e);
  };

<InputText>의 value를 setTodoInput에 넣어준다.

---

const onSubmitTodo = () => {
  setTodo((currentToDo) => [{
    id: Date.now(),
    title: todoInput,
    isDone: false,
    isUpdate: false,
    category,
  }, ...currentToDo]);
  setTodoInput("");
};

setTodo에 데이터를 넣어준 후,
InputText의 값을 빈 값으로 만들어준다.

useState Hook([value, setValue] = useState;)의 두번째 인자인 setValue 부분은(setTodo),
인자로 함수를 사용하게 되면 해당 함수의 인자는 현재의 setValue(setTodo)값인 value(todo)값이 된다.

Read

useEffect(() => {
    const saveTodo = async () => {
      const todoData = JSON.stringify(todo);
      await AsyncStorage.setItem("todos", todoData);
    };
    if (todo.length > 0) saveTodo();
  }, [todo]);

새로고침하면 todo 데이터가 사라지기 때문에 AsyncStorage를 사용해서 localstorage에 저장시켰다.
string만 저장할 수 있기 때문에 JSON.stringify로 todo를 string으로 바꿔주고,
AsyncStorage.setItem으로 "todos"라는 key값으로 저장한다.
예외처리를 해주기 위해 todo의 length가 0보다 클 경우에만 실행시키며,
todo가 바뀔 때마다 해당 useEffect가 실행된다.

---

  useEffect(() => {
    const getTodo = async () => {
      const stringTodo = await AsyncStorage.getItem("todos");
      const objectTodo = JSON.parse(stringTodo);
      setTodo(objectTodo);
    };
    getTodo();
  }, []);

key값이 "todos"인 값들을 getItem으로 가져오고, string 형태인 값들을 JSON.parse로 변환해준다.
변환한 값을 setTodo에 넣는다.

Update

const editTodoToggle = (id) => {
  const newTodo = todo.map((item) => {
    if (id === item.id) {
      return {...item, isUpdate: !item.isUpdate};
    } else {
      return {...item};
    }
  });
  setTodo(newTodo);
};

우선 버튼을 누르면 todo안의 isUpdate를 바꿔줘야 한다.
그래야 수정 input을 보여줄 수 있을테니까.
인자로 해당 게시물의 id를 받아온다. onPress={() => editTodoToggle(item.id)}.
인자로 받아온 id와 map으로 돌리고 있는 todo의 id가 같으면 isUpdate를 뒤바꿔준다.
그렇게 되면 isUpdate의 boolean에 따라 수정 iuput의 유무가 달라진다.

---

const [todoInput, setTodoInput] = useState("");

const onChangeUpdateTodo = (e) => {
    setEditTodoInput(e);
  };

input에 적는 value를 감지해서 state에 담는다.

const onSubmitUpdateTodo = (id) => {
  const editTodo = todo.map((item) => {
    if (id === item.id) {
      return {...item, title: editTodoInput, isUpdate: false};
    } else {
      return {...item};
    }
  });
  setTodo(editTodo);
  setEditTodoInput("");
};

인자로 해당 게시물의 id를 받아온다.
받아온 id와 map으로 돌고 있는 todo의 id와 같으면, 해당 데이터의 title을 감지한 value로 바꾸고,
수정 input을 처음상태로 되돌려줘야 하기 때문에 isUpdate의 값을 false로 바꿔준다.

Delete

const deleteTodo = (id) => {
  Alert.alert("Todo Delete", "정말 삭제하시겠습니까?", [
    {text: "Cancel", style: "cancel"},
    {
      text: "Delete",
      style: "destructive"
      onPress: () => {
        const deletedTodo = todo.filter((item) => id !== item.id);
        setTodo(deletedTodo);
      },
    },
  ]);
};

인자로 해당 todo의 id를 받아오고, 해당 id와 다른 모든 todo를 filter로 다시 만들어서 setTodo에 덮어씌운다.

Alert은 내가 커스텀(?)을 할 수 있게 해준다.