[React #29] ToDo List - Update / Delete

🌵 리스트에서 값 변경하기

선택한 ID와 일치하는 항목의 프로퍼티를 변경하는 기능으로, 

체크 박스에서 체크하면 해당 항목만 체크로 변경하기

App.jsx

  const onUpdate = (targetId) => {
    setTodos(
      todos.map((todo) =>
        todo.id === targetId ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };

• setTodos의 인수로는 todos 배열에서 targetId와 일치하는 id를 갖는 요소의 데이터만 바꾼 새로운 배열을 전달해야 함

TodoItem.jsx

function TodoItem({ id, isDone, content, date, onUpdate }) {
  const onChangeCheck = () => {
    onUpdate(id);
  };
  return (
    <div className='TodoItem'>
      <input onChange={onChangeCheck} type='checkbox' checked={isDone} />
      <div className='content'>{content}</div>
      <div className='date'>{new Date(date).toLocaleDateString()}</div>
      <button>삭제</button>
    </div>
  );
}

export default TodoItem;

• 체크박스의 값이 바뀔 때 onUpdate()  호출하고 인수로는 id의 값을 전달하기

onUpdate() 실행화면

---

🌵 리스트에서 값 삭제하기

선택한 항목을 화면에서 삭제하기

App.jsx

  const onDelete = (targetId) => {
    setTodos(
      todos.filter((todo) => {
        return todo.id !== targetId;
      })
    );
  };

• setTodos의 인수로는 todos 배열에서 targetId와 일치하는 id를 갖는 요소만 삭제한 새로운 배열을 전달해야 함

TodoItem.jsx

function TodoItem({ id, isDone, content, date, onUpdate, onDelete }) {
  const onChangeCheck = () => {
    onUpdate(id);
  };
  const onChangeDelete = () => {
    onDelete(id);
  };

  return (
    <div className='TodoItem'>
      <input onChange={onChangeCheck} type='checkbox' checked={isDone} />
      <div className='content'>{content}</div>
      <div className='date'>{new Date(date).toLocaleDateString()}</div>
      <button onClick={onChangeDelete}>삭제</button>
    </div>
  );
}

export default TodoItem;

• 삭제 버튼을 눌렀을 때 onDelete()  호출하고 인수로는 id의 값을 전달하기

onDelete() 실행화면

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'