todolist의 목록을 만들기 위해 map() 메소드를 사용해보았다.

코드 :

  const [todoData, setTodoData] = useState([
    {
      id: "1",
      title: "공부하기",
      completed: true,
    },
    {
      id: "2",
      title: "청소하기",
      completed: false,
    },
  ]);
	<div>
      {todoData.map((data) => (
        <div style={listStyle} key={data.id}>
          <input type="checkbox" defaultChecked={data.completed} />
          {data.title}
          <button
            style={btnStyle}
            onClick={() => {
              handleRemove(data.id);
            }}

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