Categories

• 사용자들이 버튼을 이용해서 toDo 의 카테고리를 바꿀 수 있게 하는 기능을 추가 해보겠습니다.

버튼을 이용하는 방법 1

• 인자 받는 함수를 직접 만들어서, 새 익명 함수를 선언하여 인자를 넘겨주는 것

// ToDo.tsx

import { IToDo } from "../atoms";

function ToDo({ text, category }: IToDo) {
  const onClick = (newCategory: IToDo["category"]) => {
    console.log("I wanna go to", newCategory);
  };
  return (
    <li>
      <span>{text}</span>
      {category !== "TO_DO" && (
        <button onClick={() => onClick("TO_DO")}>To Do</button>
      )}
      {category !== "DOING" && (
        <button onClick={() => onClick("DOING")}>Doing</button>
      )}
      {category !== "DONE" && (
        <button onClick={() => onClick("DONE")}>Done</button>
      )}
    </li>
  );
}

export default ToDo;

버튼을 이용하는 방법 2

• 이벤트 인자를 넘겨 받는 함수로 만들고 button 의 name 어트리뷰트 사용하여 넘겨주는 방법입니다.

// ToDo.tsx

import React from "react";
import { IToDo } from "../atoms";

function ToDo({ text, category, id }: IToDo) {
  const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const {
      currentTarget: { name },
    } = event;
    console.log("I wanna go to", name);
  };
  return (
    <li>
      <span>{text}</span>
      {category !== "TO_DO" && (
        <button name="TO_DO" onClick={onClick}>
          To Do
        </button>
      )}
      {category !== "DOING" && (
        <button name="DOING" onClick={onClick}>
          Doing
        </button>
      )}
      {category !== "DONE" && (
        <button name="DONE" onClick={onClick}>
          Done
        </button>
      )}
    </li>
  );
}

export default ToDo;