[React] Checkbox 상태 관리하기

장바구니 기능 작업을 하면서
체크박스를 이용해 상품을 체크하고
체크한 상품의 데이터를 담는 코드를 짜야 했다.


체크박스를 구현하기 위해 필요한 것은 무엇일까?
1. 체크가 되어있는 input이 무엇인지 알아야 한다.
( 체크가 된 input클릭 시 체크 해제 / 체크 해제가 된 input 클릭 시 체크)
2. 체크가 될 경우 해당 데이터를 checkedItems라는 state에 추가 / 반대 시 해당 데이터 제거

 

input의 checked속성

<input type="checkbox" checked={true}/>

위와 같이 checkbox input은 cheched속성을 가지고 있으며 true와 false로 조작이 가능하다.

일단 체크된 item의 데이터를 추가하는 함수를 만들어보자

 

Cart.js의 일부

const [checkedItems, setCheckedItems] = useState(new Set());

  function handleCheckedItems(id, isChecked) {
    if (isChecked) {
      checkedItems.add(id);
      setCheckedItems(checkedItems);
    } else {
      checkedItems.delete(id);
      setCheckedItems(checkedItems);
    }
    console.log(checkedItems);
  }

데이터의 id값과 체크 상태를 인자로 받아서

체크가 되면 데이터를 담고 uncheck면 데이터를 삭제하는 방식이다.

데이터 중복방지를 위해 set로 구성되어있다.

 

{cartData.map((item) => (
      <CartList
//..생략
        handleCheckedItem={handleCheckedItem}
      />
    ))}

해당 함수를 map으로 구성해놓은 CartList에 props로 전달해준다.

 

CartList.js의 일부

const [listChecked, setListChecked] = useState(false);

const {  handleCheckedItems } = props;


  const handleChecked = (e) => {
    setListChecked(!listChecked);
    handleCheckedItems(id, e.target.checked);
  };


...생략

<input
  type="checkbox"
  checked={listChecked}
  onChange={(e) => handleChecked(e)}
/>

listChecked state를 이용하여 default를 false로 설정해 놓은 후 input의 checked에 넣는다.

handleChecked라는 함수를 만들어 
클릭할 때마다 체크된 값의 반대로 state가 변경되게 처리한 후
props로 전달받은 함수에 값을 전달하여 호출한다.

 

하지만 이것은 id값만 담기에 적합하며 조금 더 응용 버전이 필요하다.

 

new Set()가 아닌 cartList의 id값을 비교해서 추가/제거하는 방식

// Cart.js일부 수정
function handleCheckedItems(data, isChecked) {
    if (isChecked) {
      setCheckedItems([...checkedItems, data]);
    } else {
      setCheckedItems([...checkedItems].filter((item) => item.id !== data.id));
    }
  }
  
  
  // CartList.js 일부 수정
  
   const handleChecked = ({ target }) => {
    setListChecked(!listChecked);
    handleCheckedItems({ id, price, image, quan }, target.checked);
  };

handleCheckedItems함수에 id가 아닌 data인자를 받아오고

체크 시 기존 checkeditems에서 받아온 data를 추가해주고

언 체크 시 filter을 이용하여 기존 checkedItems중에서 받아온 데이터의 아이디 값이 같은 것만 빼고

새로 저장을 해준다.