과제형 코테 중 배워보는 typescript err : No overload matches this call.

props전달 중 발생한 문제

overload
function overloading
동일한 이름의 함수에서 들어오는 매개변수의 type에 따라 다른 프로세스를 실행하는 것
다른 언어에서는 함수명만 같으면 되지만, TS에서는 각 함수의 매개변수의 개수도 같아야 함

interface Iwidth {
  width: number;
}

const PopoverContainer = styled.div<Iwidth>`
  width: ${(props) => `${props.width}px`};
  height: 80px;
  position: absolute;
  left: 0%;
  top: 110%;
  background: #ffffff;
  border: 1px solid #939fa5;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  label {
    margin-left: 10px;
  }
`;

function Popover({ data, where }: PopoverProps) {
  return (
    <PopoverContainer width={where}>
      {data.map((el, key) => {
        return (
          <div key={key}>
            <input type="checkbox"></input>
            <label>{el}</label>
          </div>
        );
      })}
    </PopoverContainer>
  );
}

1. 넣고 싶은 속성들을 담은 interface 생성
2. 그걸 div태그 뒤에 <인터페이스> 로 넣어줌