혼자 적어보는 노트

[React] Checkbox 상태 관리하기 본문

React

[React] Checkbox 상태 관리하기

jinist 2021. 11. 28. 09:14

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


체크박스를 구현하기 위해 필요한 것은 무엇일까?
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중에서 받아온 데이터의 아이디 값이 같은 것만 빼고

새로 저장을 해준다.

 

 

Comments