[React] Checkbox 값 제어하기

오늘 해볼것은 React에서 Checkbox를 구현하는 건데요 !

checkbox는 다른 input(text)와 다르게 체크되어있는지 아닌지를 나타내는 checked 속성을 사용합니다.

18 : checkedList state를 만든다.

19~25 : handleCheckbox라는, onChange에 넣어줄 함수를 만든다. 인수로 체크상태를 확인하는 checked, 어디 체크박스인지 확인하는 value를 받는다. 함수 내에서는 checked=true이면 spread연산자를 이용해 value를 checkedList에 추가해주고, false이면 filter함수를 이용해 value를 빼준다.

36~ : value에 checkbox들을 구분할 값을, onChange에는 handleCheckbox함수에 인수를 넣고, checked값은 includes 함수를 이용하여 checkedList에 있다면 true, 없다면 false로 설정한다.

import React, { useState } from "react";
import Header from "../../components/Header";

const SignUpPrivacy = () => {
  const list = [
    {
      id: 0,
      index: "1",
      content:
        "네이버 이용약관, 개인정보 수집 및 이용, 위치기반서비스 이용약관(선택), 프로모션 정보 수신(선택)에 모두 동의합니다.",
    },
    { id: 1, index: "2", content: "네이버 이용약관 동의(필수)" },
    { id: 2, index: "3", content: "개인정보 수집 및 이용 동의(필수)" },
    { id: 3, index: "4", content: "위치기반서비스 이용약관 동의(선택)" },
    { id: 4, index: "5", content: "프로모션 정보 수신 동의(선택)" },
  ];

  const [checkedList, setCheckedList] = useState([]);
  const handleCheckbox = (checked, value) => {
    if (checked) {
      setCheckedList([...checkedList, value]);
    } else {
      setCheckedList(checkedList.filter((el) => el !== value));
    }
  };

  return (
    <div className="SignUpPrivacy">
      <Header />
      <section>
        {list.map((it) => {
          return (
            <label key={it.id}>
              <input
                type="checkbox"
                value={it.index}
                onChange={(e) => {
                  handleCheckbox(e.target.checked, e.target.value);
                }}
                checked={checkedList.includes(it.index) ? true : false}
              />
              {it.content}
            </label>
          );
        })}
      </section>
    </div>
  );
};

export default SignUpPrivacy;