[리액트 네이티브] 리액트 네이티브로 TodoList CRUD 기능 구현해보기

>> 리액트 네이티브로 투두리스트 CRUD 기능 구현하기

ADD 기능

*add 할때는 todos에 단순히 newTodo를 추가해주는거고

const addTodo = () => {
    const newTodo = {
      id: Date.now(),
      text,
      isDone: false,
      isEdit: false,
      cate,
    };
    // 배열로 [] 감싸주는거 잊지말긔!!!!!!!!!!!
    setTodos([...todos, newTodo]);
  };

 

UPDATE 기능

• update는 새롭게 얕은 복사를 해서, 파라메터로 받아왔던 id의 인덱스를 찾고(findIndex)⇒ 이놈 자체를 index라고 객체하나 만들어준다음에 todos[index만들어준객체] 의 값을, 새로운 editText로 바꾼다고 todos[index만들어준객체] .text = eidtText 라고 해주긔

const editAction = (id) => {
    // 1.새로운 todos를 복사한다.
    const newTodos = [...todos];
    // 2. 넘겨받았던 id랑 일치하는 index번호를 받아온다.
    const findInd = newTodos.findIndex((todo) => todo.id === id);
    // 3. 해당 index의 객체 내용을 수정해준다.
    newTodos[findInd].text = editText;
    // 4. 수정이 완료되었으니 다시 false로 바꿔준다.
    newTodos[findInd].isEdit = false;
    setTodos(newTodos);
  };

 

Delete 기능

처음부터 파라메터로 id를 받아오고, todos를 얕은 복사를 해서 해당 id만 제외한 것들을 filter하고 그걸 다시 원본 todos에 붙여넣어주기

const deleteTodo = (id) => {
    Alert.alert("todo ", "정말삭제?", [
      {
        text: "취소",
        style: "cancel",
        onPress: () => console.log("취소"),
      },
      {
        text: "삭제",
        style: "destructive",
        onPress: () => {
          const newTodos = todos.filter((todo) => todo.id !== id);
          setTodos(newTodos);
        },
      },
    ]);
  };

 

Read 기능

<ScrollView>
        {todos.map((todo) => {
          if (cate === todo.cate) {
            return (
              <TodoBox key={todo.id}>
                <View style={{ flexDirection: "row" }}>
                  {/* ~~~~~~~~ todo.isEdit이 true라면, 전자가 false라면 후자가 뜨도록 세팅 ~~~~~~~ */}
                  {todo.isEdit ? (
                    <TextInput
                      style={{ backgroundColor: "white", flex: 1 }}
                      value={editText}
                      onChangeText={setEditText}
                      onSubmitEditing={() => editTodo(todo.id)}
                    />
                  ) : (
                    <Text
                      style={{
                        textDecorationLine: todo.isDone
                          ? "line-through"
                          : "none",
                      }}
                    >
                      {todo.text}
                    </Text>
                  )}

                  <View
                    style={{
                      flex: "1",
                      alignItems: "flex-end",
                    }}
                  >
                    <View
                      style={{
                        flexDirection: "row",
                        justifyContent: "space-around",
                        width: 90,
                      }}
                    >
                      {/* --------isDone 변경되는버튼-------------- */}
                      <TouchableOpacity>
                        <AntDesign
                          name="checksquare"
                          size={24}
                          color="black"
                          onPress={() => {
                            isDoneChange(todo.id);
                          }}
                        />
                      </TouchableOpacity>
                      {/* -----------Editing버튼---------------*/}
                      <TouchableOpacity onPress={() => setEdit(todo.id)}>
                        <FontAwesome
                          name="pencil-square-o"
                          size={24}
                          color="black"
                        />
                      </TouchableOpacity>
                      {/* ~~~~~~~~~~~~~~~~~~~삭제버튼~~~~~~~~~~~~~~~~ */}
                      <TouchableOpacity onPress={() => deleteTodo(todo.id)}>
                        <FontAwesome name="trash-o" size={24} color="black" />
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>
              </TodoBox>
            );
          }
        })}
      </ScrollView>