[React] 체크박스 선택된 값(value) 확인하기

데이터를 axios로 받아온 후 화면에 띄우기 위해 아래처럼 코드를 작성했다.

{data.map((item) => (
        <div>
            ...
            {item.roomNumbers.map((roomNumber) => (
                <div className="room">
                    <label>{roomNumber.number}</label>
                    <input
                    type="checkbox"
                    value={roomNumber._id}
                    onChange={handleSelect}
                    />
                </div>
            ))}
        </div>
))}

받아온 data 안에 있는 roomNumbers 배열을 map 메서드를 이용해 JSX를 생성하고 방번호를 출력하려고 한다.

<input>에 type을 checkbox로 넣으면 체크박스가 생성되고 value는 체크가 되었을 때 전달되는 값을 말한다.

나는 roomNumbers 배열 안에 있는 _id 값을 확인하고 싶어 value에 _id를 넣었고,

onChange이벤트로 체크박스 상태가 변경되었을 때 handleSelect 함수를 호출했다.

 

const [selectedRooms, setSelectedRooms] = useState([]);

const handleSelect = (e) => {
    const checked = e.target.checked;
    const value = e.target.value;
    setSelectedRooms(
      checked
        ? [...selectedRooms, value]
        : selectedRooms.filter((item) => item !== value)
    );
 };

선택된 방 정보를 상태관리하기 위해 selectedRooms를 선언하고 값을 배열에 넣기 위해 초기값을 빈배열로 설정했다.

e.target.checked가 true면 체크박스가 선택이 되었다는 것, e.target.value는 체크박스의 값을 가져올 수 있다.

 

삼항 연산자를 이용해서 선택된 방을 업데이트하려고 하는데

체크박스에 체크가 되어있으면 기존 selectedRooms 배열에 체크한 value값을 합쳐서 새로운 배열을 생성할 수 있다.

(불변성을 유지하기 위해 상태를 직접 변경하지 않고 기존 selectedRooms배열을 복사)

체크가 되지 않으면 selectedRooms 배열에 필터링을 하는데 기존에 선택된 방 중 체크가 해제된 value값을 제거한다.

 

체크박스에 체크를 하면 배열에 value값이 들어가고 체크를 해제하면 배열에서 제거된다.