[React] 리액트에서 Set 이용한 Checkbox 상태관리하기!

0. 소개

프로젝트 작업을 하면서 checkbox가 필요하게 되었고,
다양한 방법중에 Set과 useState를 이용한 방법으로 작업을 해보았습니다.
Set과 useState를 이용한 방법을 예제와 함께 정리해보겠습니다

1. Checkbox 컴포넌트 분리

우선 checkbox가 하나가 담겨져 있는 컴포넌트와,
그 checkbox들을 담고있는 list 컴포넌트를 분리해서 파일을 만듭니다.
예제 파일의 구조는 다음과 같습니다.

// CheckBox
import React from "react";
export default function CheckBox() {
  return (
    <label>
      <input id={id} type="checkbox" checked={bChecked} onChange={(e) => checkHandled(e)} />
      {text}
    </label>
  )
}

// CheckBoxList
import React, { useState } from "react";
import CheckBox from "./CheckBox";
export default function App () {
  const checkList = [...Array(5).fill("체크").map((v, i) => v + i)]

  return (
    <>
      <header>
        <label>
          <input type="checkbox" onChange={(e) => allCheckedHandler(e)} />
          전체선택
        </label>
      </header>
      <div>
        {
          checkList.map((issue, index) => (
            <CheckBox key={index} id={`id`+index} />
          ))
        }
      </div>
    </>
  )
}

2. 하나의 CheckBox 컴포넌트 상태관리하기

체크박스의 상태를 관리하는 것은 즉, 어떠한 체크박스가 클릭이 된건지 알 수 있어야 한다는 것입니다.
이번에 Set을 이용하게 된 계기는 중복되는 값이 없이 유일한 값만이 필요하다고 생각하여 사용하게 되었습니다.
사용한 방식은 다음과 같습니다.

1. CheckBoxList에 useState(new Set()) 추가

const [checkItems, setCheckItems] = useState(new Set)

우선 CheckBoxList에 useState()를 이용하여 빈 Set을 추가해줍니다.
이제 비어있는 set에 클릭되는 체크박스를 추가하는 방식으로 상태를 관리하는 방식입니다.

2. checkItemHandler() 함수 생성 및 전달

// CheckBoxList.jsx
const checkItemHandler = (id, isChecked) => {
  if (isChecked) {
    checkItems.add(id) 
    setCheckItems(checkItems)
    console.log(checkItems)
  } else if (!isChecked) {
    checkItems.delete(id)
    setCheckItems(checkItems)
  }
}

// ... 중간 코드생략
{
  checkList.map((text, index) => (
    <CheckBox
      key={index}
      text={text}
      id={`id`+index}
      checkItemHandler={checkItemHandler} // props로 함수전달
      />
  ))
}

checkItemHandler 함수 매개변수로 id와 check값을 받아서
체크가 되었을 때는 체크가 된 체크박스의 id를 add하고 해제가 되면 delete하게 하는 함수이며,
이 함수를 자식 컴포넌트인 CheckBox 컴포넌트에 props로 전달합니다.

3. CheckBox 컴포넌트에서 checkItemHandler() 실행

전달받은 함수를 CheckBox에서 해당 아이디와 onChange로 체크 여부를 판단하여 함수의 매개변수로 전달하여 실행을 하게끔 합니다.

// CheckBox.jsx
const [checked, setChecked] = useState(false); // 체크 여부 판단

const checkHandled = ({target}) => {
  setChecked(!checked);
  checkItemHandler(target.id, target.checked);
}

return (
  <label>
    <input id={id} type="checkbox" checked={checked} onChange={(e) => checkHandled(e)} />
    {text}
  </label>
)}

3. 전체선택

1. state 설정

전체선택의 상태값을 생성을 합니다.

const [isAllChecked, setIsAllChecked] = useState(false);

2. allCheckedHandler() 함수 생성

allCheckedHandler() 함수를 생성하여 target의 checked값을 받아서 체크 여부를 판단하고,
true면 setCheckItems에 반복문을 이용하여 모든 값을 넣어주고 위에서 생성한 전체선택의 상태값을 true로 바꿔줍니다.
false면 clear메서드를 이용해서 모든 값을 지우고, 상태값을 false로 바꿔줍니다.

const allCheckedHandler = ({target}) => {
  if (target.checked) {
    setCheckItems(new Set(checkList.map((checkbox, index) => `id`+index)))
    setIsAllChecked(true)
  } else {
    checkItems.clear();
    setCheckItems(checkItems);
    setIsAllChecked(false)
  }
}

3. 전체선택 상태값 전달

allCheckedHandler() 함수를 이용해서 isAllChecked 상태값을 props로 전달을 해주고,
CheckBox컴포넌트에서는 useEffect로 바뀐 상태값에 따라서 체크 값을 바꿔줍니다.

const allCheckHandler = () => setChecked(isAllChecked);
useEffect(() => allCheckHandler(), [isAllChecked])

결과

참고

[React] Checkbox 상태관리하기