여는 말

TS를 익히기 위해 만들어본 TODO 앱입니다

이전 글에서는 새로운 Todo를 추가했습니다

이번 글에서는 추가된 Todo를 수정하고 삭제하는 것을 목표로 합니다

---

삭제 버튼 아이콘과 수정 버튼 아이콘은 FontAwesome Icon을 사용했습니다

소스

TodoList.tsx

리스트에서 todo를 수정, 삭제할 수 있는 함수를 하위 컴포넌트로 전달합니다

// TodoList.tsx

const TodoList = () => {
  // ...
   const Items = () => {
    return todos.map((item) => {
      return (
        <Todo
          idx={item.idx}
          title={item.title}
          project={item.project}
          deleteTodo={deleteTodo}
          updateTodo={updateTodo}
        ></Todo>
      );
    });
  // ...
}

Todo.tsx

수정, 삭제 버튼의 이벤트 핸들러를 정의합니다

// Todo.tsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faPenToSquare } from "@fortawesome/free-solid-svg-icons";

//...

interface TodoProps extends ITodo {
  deleteTodo: (idx: number) => void;
  updateTodo: (todo: ITodo) => void;
}

const Todo = (props: TodoProps) => {
  const [isEdit, setIsEdit] = useState<boolean>(false);

  const handleClickDeleteBtn = () => {
    props.deleteTodo(props.idx);
  };

  const handleClickUpdateBtn = () => {
    setIsEdit(true);
  };
  return (
    <div className="todo-item">
      <div>
        <p className="todo-title">{props.title}</p>
      </div>
      <div>
        <p className="todo-project">{props.project}</p>
      </div>
      <div className="btns-container">
        <button className="btn-delete" onClick={handleClickDeleteBtn}>
          <FontAwesomeIcon icon={faTrash} />
        </button>
        <button className="btn-update" onClick={handleClickUpdateBtn}>
          <FontAwesomeIcon icon={faPenToSquare} />
        </button>
      </div>
    </div>
  );
}

isEdit 상태일 때 Title과 Project Text를 input으로 교체하고, 변경 이벤트를 핸들링합니다

// Todo.tsx

// ...
const Todo = (props: TodoProps) => {
  const [title, setTitle] = useState<string>("");
  const [project, setProject] = useState<string>("");

  useEffect(() => {
    setTitle(props.title);
    setProject(props.project);
  }, [props]);

  // ...
  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  const handleChangeProject = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProject(e.target.value);
  };

  const handleClickSubmitBtn = () => {
    props.updateTodo({ idx: props.idx, title: title, project: project });
    setIsEdit(false);
  };

  return (
    <div className="todo-item">
      <div>
        {isEdit ? (
          <input value={title} onChange={handleChangeTitle}></input>
        ) : (
          <p className="todo-title">{title}</p>
        )}
      </div>

      <div>
        {isEdit ? (
          <input value={project} onChange={handleChangeProject}></input>
        ) : (
          <p className="todo-project">{project}</p>
        )}
      </div>

      <div className="btns-container">
        {isEdit ? (
          <button onClick={handleClickSubmitBtn}>submit</button>
        ) : (
          <>
            <button className="btn-delete" onClick={handleClickDeleteBtn}>
              <FontAwesomeIcon icon={faTrash} />
            </button>
            <button className="btn-update" onClick={handleClickUpdateBtn}>
              <FontAwesomeIcon icon={faPenToSquare} />
            </button>
          </>
        )}
      </div>
    </div>
  );
}

결과

---

닫는 말

전체 소스 : Github