유연한 UI Component 만들기

import React from 'react';

interface InputProps  {
  label: string;
  id: string;
}

const Input = ({ label, id, ...props }: InputProps) => {
  return (
    <p className="control-row">
      <label htmlFor={id}>{label}</label>
      <input type="text" name={id} id={id} required {...props} />
    </p>
  );
};

export default Input;

 

input 컴포넌트를 위와 같이 짰는데 

 

        <Input
          label="Full Name"
          id="name"
          onChange={handleChange}
          value={inputs.name}
        />

이렇게 사용할 때 

'{ label: string; id: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; value: string; }' 형식은 'IntrinsicAttributes & InputProps' 형식에 할당할 수 없습니다.
  'IntrinsicAttributes & InputProps' 형식에 'onChange' 속성이 없습니다.ts(2322)
와 같은 에러가 발생했었다.

이것은 props정의에 label이랑 id만 정의 되어있어서 발생한건데

나머지 들어가는 속성들도 일일히 다 정의해 주어야 했지만 

 

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  id: string;
}

 

InputProps에 inputHTMLAttributes를 상속해주면 해결이 된다.