To do list - CRD

React.js로 to do list 만들기

import { useState } from "react";

const TodolistPage = () => {
  const [todotext, setTodoText] = useState("");
  const [todolist, setTodoList] = useState([]);

  const handletoChange = (e) => {
    setTodoText(e.target.value);
  };

  const handletoSubmit = (e) => {
    if (todotext === "") {
      alert("Write to do!");
    } else {
      const tempTodoList = todolist;
      setTodoList([...tempTodoList, todotext]);
      setTodoText("");
    }
  };

  const handletoDelete = (e) => {
    const targetindex = Number(e.currentTarget.dataset.index);
    const tempTodoList = todolist.filter(
      (text, index) => index !== targetindex
    );
    setTodoList(tempTodoList);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <ul>
        {todolist.map((text, index) => (
          <li key={`${text}_${index}`}>
            {text}
            <button data-index={index} onClick={handletoDelete}>
              x
            </button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={todotext}
        placeholder="할 일을 입력해주세요"
        onChange={handletoChange}
      ></input>
      <button onClick={handletoSubmit}>확인</button>
    </div>
  );
};

export default TodolistPage;

delete 기능 시 지워야하는 <li>를 지정하기 위해 data-이름 형태로 dataset을 DOM에 저장하여 onClick시 .currentTarget.dataset.이름 으로 타켓팅하여 delete 기능을 실행한다.

---

실행화면

빈 텍스트 입력시 내용을 쓰라는 alert 창을 띄운다.

list 작성과 delete 기능