TypeScript Props 설정

타입스크립트를 사용해서 공통으로 사용되는 영역을 컴포넌트화해서 사용하는 경우 컴포넌트의 props 타입을 설정해야 한다.

사용되는 props가 정확하게 정해져 있는 경우도 있지만 어떤 prop이 나중에 추가될지 모르는 경우도 있다. 

특히 input, textarea, button 등의 요소에는 많은 속성이 존재하고 필수로 입력해야 하는 속성과 상황에 따라 추가할 수 있는 필수는 아닌 속성이 존재한다.

위와 같은 상황에서 props의 타입을 지정할 때 아래와 같이 설정해줄 수 있다.

 

interface Props {
  id: string;
  label: string;
  name: string;
  type: string;
  [key: string]: any;  
}

const Input = ({id, label, name, type, ...rest}: Props) => {
	return (
        <label htmlFor={id}>{label}</label>
        <input id={id} name={name} type={type} {...rest} />
    );
}

export default Input;

 

어떤 props가 추가될지 모르기 때문에  [key: string]: any; 이런식으로 타입을 지정한 후 

지정된 props (id, label, name, type)을 제외한 모든 props를 rest로 받아준다.

해당하는 요소에 스프레드 문법을 사용하여 지정해주면 된다.