체크박스

"use client";
import React, { useState } from "react";
import { IuseCheck } from "@/type";

export default function useCheck(initialvalues: IuseCheck[]) {
  const [checkbox, setCheckbox] = useState(
    initialvalues.map((item) => ({ ...item, isChecked:false }))
  );
  const singlecheck = (id:string) => {
    setCheckbox(
      checkbox.map((item) =>
        item.id === id ? { ...item, isChecked: !item.isChecked } : item
      )
    );
  };
  const allcheck = () =>{
    const allchecks = checkbox.every((item) => !item.isChecked);
    setCheckbox(checkbox.map((item) => ({ ...item, isChecked: allchecks })));
  }
  return [checkbox, singlecheck, allcheck] as const;
}

 전체 선택과 개별선택에 대한 훅이다.
일단 state안에 리스트를 넘겨 주고 싱글은 해당리스트의 아이디가 맞으면 true 아니면 false로 바꾸고 
전체는 checkbox안에 있는 모든리스트의 ischecked를 변경시켜 준다 실제로 사용하려면 아래와 같이 또 사용을 해야된다.

// 전체 

<Checkbox
          id="allCheck"
          weight="700"
          onChange={allcheck}
          checked={checkbox.every((item) => item.isChecked)}
        >
          전체동의
        </Checkbox>
// 개별
<Checkbox
            id={checkboxs.id}
            checks={checkboxs.checks}
            key={checkboxs.id}
            checked={checkboxs.isChecked}
            onChange={() => singlecheck(checkboxs.id)}
          >
            {checkboxs.name}
          </Checkbox>

 

여기서 또 중요한거는 처음에 내보낼때 as const를 써야한다는거....