[React] fiter() 메소드 이용해서 todolist 목록 지우기

코드 :

  const handleRemove = (id) => {
    let newTodoData = todoData.filter((data) => data.id !== id);
    setTodoData(newTodoData);
  };

실제 적용 :

    <div>
      {todoData.map((data) => (
        <div key={data.id}>
          <div className="flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 bg-gray-100 border rounded">
            <div className="items-center">
              <input
                type="checkbox"
                onChange={() => handleCompletedChange(data.id)}
                defaultChecked={data.completed}
              />
              <span className={data.completed ? "line-through" : undefined}>
                {data.title}
              </span>
            </div>
            <button
              onClick={() => {
                handleRemove(data.id);
              }}
              className="px-4 py-2 float-right"

              X
            </button>
          </div>
        </div>
      ))}
    </div>