[JS] input[type=checkbox] 다양한 조건 부여하기

import { useState } from "react";
import "./styles.css";

const maxChecked = 2;

export default function App() {
  const [checkCount, setCheckCount] = useState(0);

  // 하나만 선택될 수 있는 체크박스
  // 하나 선택된 채로 다른 체크박스를 선택하면 체크가 옮겨짐
  // 선택된 체크박스를 다시 클릭하면 꺼짐
  const checkOnlyOne = (checkThis) => {
    const checkboxes = document.getElementsByName("test1");
    checkboxes.forEach((checkbox, index) => {
      if (checkbox !== checkThis) {
        checkbox.checked = false;
      }
      console.log(index, checkbox.checked);
    });
  };

  // 최대 두개까지 선택될 수 있는 체크박스
  // 두개 선택된 채로 다른 체크박스를 선택하면 그대로
  // 선택된 체크박스를 다시 클릭하면 꺼짐
  const checkOnlyTwo = (checkThis) => {
    if (checkThis.checked) {
      setCheckCount((prev) => prev + 1);
    } else {
      setCheckCount((prev) => prev - 1);
      return;
    }
    // setState가 비동기처럼 동작해서 함수가 끝나고 값이 변하기때문에 같거나 크다고 해줘야 의도대로 동작한다
    if (checkCount >= maxChecked) {
      checkThis.checked = false;
      setCheckCount((prev) => prev - 1);
    }
  };

  return (
    <>
      <label>
        <input
          type="checkbox"
          name="test1"
          onClick={(e) => checkOnlyOne(e.target)}
        />{" "}
        1
        <br />
      </label>
      <label>
        <input
          type="checkbox"
          name="test1"
          onClick={(e) => checkOnlyOne(e.target)}
        />{" "}
        2
        <br />
      </label>
      <label>
        <input
          type="checkbox"
          name="test1"
          onClick={(e) => checkOnlyOne(e.target)}
        />{" "}
        3
        <br />
      </label>
      <br />
      <br />
      <label>
        <input
          type="checkbox"
          name="test2"
          onClick={(e) => checkOnlyTwo(e.target)}
        />{" "}
        1
        <br />
      </label>
      <label>
        <input
          type="checkbox"
          name="test2"
          onClick={(e) => checkOnlyTwo(e.target)}
        />{" "}
        2
        <br />
      </label>
      <label>
        <input
          type="checkbox"
          name="test2"
          onClick={(e) => checkOnlyTwo(e.target)}
        />{" "}
        3
        <br />
      </label>
    </>
  );
}