인프런 커뮤니티 질문&답변

import styled from "@emotion/styled";
import { useState } from "react";

// 스타일
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
const Container = styled.div`
  display: flex;
  justify-content: center;
  padding: 100px;
`;
const Wrapper = styled.table`
  width: 600px;
`;
const MyTr = styled.tr`
  text-align: center;
`;
const MyTd = styled.td`
  padding: 20px 0 20px 0;
`;
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

export default function Quiz02() {
  // 리스트에 뿌려줄 목업 데이터
  // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  const dataList = [
    { id: 1, data: "9월달 시스템 점검 안내입니다.", date: "2020.09.19" },
    { id: 2, data: "안녕하세요! 공지사항 전달드립니다.", date: "2020.09.17" },
    { id: 3, data: "개인정보 처리방침 변경 사전 안내", date: "2020.09.12" },
    { id: 4, data: "ios 10.0이하 지원 중단 안내", date: "2020.08.10" },
    { id: 5, data: "이용약관 변경 사전 안내", date: "2020.08.01" },
    { id: 6, data: "개인정보 처리방침 변경 사전 안내", date: "2020.07.19" },
  ];

  const [checkList, setCheckList] = useState([]);
  console.log("현재 체크리스트", checkList);

  const onClickCheckAll = () => {
    console.log("받아오는 데이터의 길이", dataList.length); 
    console.log("현재 체크리스트에 들어있는 데이터의 길이", checkList.length);
    if (checkList.length !== dataList.length) {
      setCheckList(dataList);                   //체크 리스트 크기와 데이터 크기가 같지않으면 체크리스트에 데이터를 넣는다.
    } else {
      setCheckList([]);
    }
  };

  const onCheckedItem = (list) => {
    console.log("내가 누른 체크리스트가 뭔가?", list);
    // 모든 checkList.id 중에 체크한 list.id값이 없으면 CheckList에 list 값을 넣는다.
    if (checkList.every((cur) => cur.id !== list.id)) {
      setCheckList([...checkList, list]);
    } else {
      // 체크된것만 제외하고 배열에 담는다.
      const result = checkList.filter((cur) => cur.id !== list.id);
      setCheckList(result);
    }
  };

  const isChecked = (list) => {   // 체크박스에 체크할지 안할지 
    return checkList.some((cur) => cur.id === list.id); //list.id 요소와 checkList.id 요소와 겹치는게 있다면 true를 반환한다.
  };

  return (
    <Container>
      <Wrapper>
        <tr>
          <th>
            <input
              type="checkbox"
              onChange={onClickCheckAll}
              checked={checkList.length === dataList.length}
              style={{ marginTop: "5px" }}
            ></input>
          </th>
          <th>번호</th>
          <th>제목</th>
          <th>작성일</th>
        </tr>
        {dataList.map((list, index) => (  // 데이터 배열의 요소와 인덱스 가져오기
          <MyTr key={index}>              {/* 정적 데이터기 때문에 key값을 인덱스로 설정 */}
            <MyTd>
              <input
                type="checkbox"
                onChange={() => onCheckedItem(list)}
                checked={isChecked(list)}
                style={{ marginTop: "5px" }}
              />
            </MyTd>
            <MyTd>{list.id}</MyTd>
            <MyTd>{list.data}</MyTd>
            <MyTd>{list.date}</MyTd>
          </MyTr>
        ))}
      </Wrapper>
    </Container>
  );
}

섹션 30 퀴즈 레퍼런스 코드에서

onChange={() => onCheckedItem(list)}

1. 이 부분 그냥 화살표 함수로 하는 이유가 있나요?

else {
      // 체크된것만 제외하고 배열에 담는다.
      const result = checkList.filter((cur) => cur.id !== list.id); 
      setCheckList(result);
    }

2. 이 코드에서 선택한것을 체크해제 했을때 아무것도 체크 되어 있지 않다면 result는 빈값인가요?