이벤트 핸들러

const list = [
    {number:1, title:"제목입니다1", date:"2020.01.01"},
    {number:2, title:"제목입니다2", date:"2020.01.02"},
    {number:3, title:"제목입니다3", date:"2020.01.03"},
    {number:4, title:"제목입니다4", date:"2020.01.04"},
    {number:5, title:"제목입니다5", date:"2020.01.05"},
    {number:6, title:"제목입니다6", date:"2020.01.06"}
]

export default function List() {

  const [aaa, setAaa] = useState(false);
  const [bbb, setBbb] = useState(Array(list.length).fill(false));

  const onChangeCheckMain = () => {
    setAaa(!aaa);
  };

// 원래 (index) 자리에 (event)가 무조건 들어오지만
// 함수를 한번 더 감싸줌으로써 index가 전달되게 해준다..
  const onChangeCheckList = (index) => {
    const bbbLists = [...bbb];
    bbbLists[index] = !bbb[index];
    console.log(bbbLists);
    setBbb(bbbLists);
  };

  return (
    <>
      <Row>
        <input type="checkbox" checked={aaa} onChange={onChangeCheckMain} />
        <div>번호</div>
        <div>제목</div>
        <div>작성일</div>
      </Row>
      {list.map((el, index) => (
        <Row key={el.number}>
          <input
            type="checkbox"
            checked={bbb[index]}
			// 클로저
			// 함수로 감싸지 않으면 안된다
			// (event) => onChangeCheckList(index)와 같음
            onChange={() => onChangeCheckList(index)}
          />
          <div>{el.number}</div>
          <div>{el.title}</div>
          <div>{el.date}</div>
        </Row>
      ))}
      <button>선택 삭제</button>
    </>
  );
}

마성의 클로저다