React 전체선택 기능 구현

참고문서

1) find.js

  // 체크 카드 단일 선택
  const handleSingleCheck = (checked, idx) => {
    if (checked) {
      setSelection((prev) => [...prev, idx])
    } else {
      setSelection(selection.filter((id) => id !== idx))
    }
  }

  // 전체 선택
  const handleAllCheck = (checked) => {
    if (checked) {
      const idxArray = []
      children.forEach((item) => idxArray.push(item.id))
      setSelection(idxArray)
    } else {
      setSelection([])
    }
  }

  // 아이 CheckCard
  const list = children.map((child) => (
    <CheckCard
      key={child.id}
      child={child}
      onClick={handleSingleCheck}
      checked={selection.includes(child.id) ? true : false}
    />
  ))

2) CheckBox.js

  useEffect(() => {
    if (!allChecked) {
      setActvie(false)
    } else {
      setActvie(true)
    }
  }, [allChecked])

  const handleClick = () => {
    setActvie(!active)
    onClick(!active)
  }

3) CheckCard.js

  const handleClick = () => {
    setState(!state)
    onClick(!state, child.id)
  }

  useEffect(() => {
    if (checked) {
      setState(true)
    } else {
      setState(false)
    }
  }, [checked])