여러 개의 checkbox 관리하는 법 (+여러개 input 관리법)

import React, { useState, useEffect } from "react";

export default function App(){
  const [checkedInputs, setCheckedInputs] = useState([]);

  const changeHandler = (checked, id) => {
    if (checked) {
      setCheckedInputs([...checkedInputs, id]);
    } else {
      // 체크 해제
      setCheckedInputs(checkedInputs.filter((el) => el !== id));
    }
  };

  
  return (
  	<div>
      <input 
        id={???}
        type="checkbox" 
        onChange={()=>{
          changeHandler(e.currentTarget.checked, id값)
        }}
        checked={checkedInputs.includes(id값) ? true : false}
      />
    </div>
  )
}

1) onChange ====>> checked 상태값과 id(또는 value 등) 값을 전달한다.

2) 체크된 id는 []배열 형태의 state에 추가한다.

3) 체크해제된 id 는 []배열 형태의 state에서 삭제한다.

4) input의 checked 값은 []배열 형태의 state에 해당 input의 id값이 포함되는지 검사하여 결정한다.

 

참고 사이트

velog.io/@realryankim/TIL-React-%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4%EC%A0%84%EC%B2%B4-%EC%84%A0%ED%83%9D-%EC%B2%B4%ED%81%AC-%ED%95%B4%EC%A0%9C

 

 

 

react.vlpt.us/basic/09-multiple-inputs.html

// 여러 개의 'input'을 관리하는 방법이다. 참고 바람