React native, Expo go로 Todo List 만들기

추가하기 Add Todo ➕

const [text, setText] = useState('');

const newTodo = {
    id: Date.now(),
    text,
    isDone: false,
    isEdit: false,
    category,
  };
  
const addTodo = () => {
    setTodos((prev) => [...prev, newTodo]);
    setText('');
  };

setTodos를 이용해서 이전 값에 newTodo를 추가해준다.

삭제하기 Delete Todo ➖

const deleteTodo = (id) => {
    Alert.alert('Todo 삭제', '정말 삭제하시겠습니까?', [
      {
        text: '취소',
        style: 'cancel',
      },
      {
        text: '삭제',
        style: 'destructive',
        onPress: () => {
          const newTodos = todos.filter((todo) => todo.id !== id);
          setTodos(newTodos);
        },
      },
    ]);
  };

id를 인자로 받아 filter함수를 통해 다른 값을 걸러서 필터 해준다.

수정하기 Edit Todo 🖍

const editTodo = (id) => {
    const newTodos = [...todos];
    const idx = newTodos.findIndex((todo) => todo.id === id);
    newTodos[idx].text = editText;
    newTodos[idx].isEdit = false;
    setTodos(newTodos);
  };

마찬가지로 id를 인자로 받아 같은 값을 findIndex를 통해서 확인 후 text를 변경하게 해준다.