FC를 사용했을 때 Fragement를 제거하고, datas.map으로 return 하면 JSX.Element Type에러가 발생한다.

이유는 FC는 JSX.Element 1개만 return 해야하기 때문이다. 때문에 Fragement로 그룹화를 해서 하나의 Element를 return 해야 한다.

import { ChangeEventHandler, HtmlHTMLAttributes } from 'react';

interface IRadio extends HtmlHTMLAttributes<HTMLDivElement> {
  inputName: string;
  currentValue: number;
  handleOnChange: ChangeEventHandler<HTMLInputElement>;
  datas: readonly { label: string; value: string | number }[] | undefined;
}
const Radio = ({ inputName, currentValue, handleOnChange, datas, ...divAttributes }: IRadio) => {
  if (!datas) return null;

  return (
    <>
      {datas.map(({ label, value }, index) => (
        <div key={label} {...divAttributes}>
          <input
            type="radio"
            id={inputName + String(index)}
            name={inputName}
            value={value}
            checked={value === currentValue}
            onChange={handleOnChange}
          />
          <label htmlFor={inputName + String(index)}>{label}</label>
        </div>
      ))}
    </>
  );
};

export default Radio;

https://velog.io/@dolarge/React-Fragment란