[TIL] React 를 활용한 input radio, checkbox tab 만들기

문제정의
1. 재사용이 가능한 체크박스와 라디오 버튼 탭을 만들어야 한다.
2. 체크박스인 경우, 전체선택 / 해제가 가능해야 한다.
3. 체크박스나 라디오버튼에 들어가는label, value값은 데이터에서 올 수도 있다.

1. checkbox tab 만들기

기본컨셉
checkbox 가 change 될 때마다 상위에서 name, checked 값을 처리한다

const FilterCheckbox = ({ ...props }) => {
  
  // selectData {[key:string]: boolean}
  const [selectData, setSelectData] = useState({
    all: false,
    check: false,
  });
// handleChange 에서 전체선택, 개별선택값에 따라 name에 맞는 checked 값을 변경한다.
  const handleChange = (e) => {
    const { checked, name } = e.target;

    if (name === "all") {
      setSelectData((prev) => {
        const newData = { ...prev };
        for (let key in newData) {
          newData[key] = checked;
        }
        console.log("마지막", newData);
        return newData;
      });
    } else {
      setSelectData({
        ...selectData,
        [name]: checked,
      });
    }
  };

  return (
    <div>
      <Checkbox onChange={handleChange} name={"all"} checked={selectData.all}>
        전체선택
      </Checkbox>
      <Checkbox
        onChange={handleChange}
        name={"check"}
        checked={selectData.check}
      >
        라벨이름
      </Checkbox>
    </div>
  );
};

2. Input radio 만들기

기본컨셉
input[type=radio]의 상위 컨테이너에서 현재 선택된 radio input의 value 값을 저장하고 바꿔준다.

const FilterRadio = ({ name, ...props }) => {
  // 초기값 설정 : {[key: name]: value}
  const [selectData, setSelectData] = useState({ time: "map" });

  // input[type=radio] value 값을 바꿔줌
  const handleChange = (e) => {
    const { name, value } = e.target;
    setSelectData({
      [name]: value,
    });
  };

  return (
    <div {...props}>
      <Radio
        name={name}
        value="map"
        checked={selectData[name] === "map"}
        onChange={handleChange}
      >
        더미텍스트
      </Radio>
      <Radio
        name={name}
        value="map2"
        checked={selectData[name] === "map2"}
        onChange={handleChange}
      />
      <Radio
        name={name}
        value="map3"
        checked={selectData[name] === "map3"}
        onChange={handleChange}
      />
    </div>
  );
};

export default FilterRadio;