[TypeScript + React] 공통 UI 컴포넌트 interface 선언

공통 UI 컴포넌트를 쓰다 보면 부모 컴포넌트에서 전달해야할 props가 각기 다른 경우가 태반이다.

이럴 때 TypeScript에서는 어떤 식으로 interface를 작성해야 하는지 감을 못 잡고 있었는데 거금을 주고 강의 결제했더니 바로 거기서 튀어나왔다. 아주 값진 쓰임이었다...!

 

아래와 같이 인터페이스에서 [key: string]: any; 로 각종 props를 처리할 수 있게 넣어준 후

컴포넌트가 받을 props 선언하는 부분에서는 ...rest와 같이 spread 연산자로 풀어주면 끝

interface TextAreaProps {
  label?: string;
  name?: string;
  [key: string]: any;
}

export default function TextArea({ label, name, ...rest }: TextAreaProps) {
  return (
    <div>
      {label ? (
        <label
          htmlFor={name}
          className="mb-1 block text-sm font-medium text-gray-700"
        >
          {label}
        </label>
      ) : null}
      <textarea
        id={name}
        className="mt-1 shadow-sm w-full focus:ring-orange-500 rounded-md border-gray-300 focus:border-orange-500 "
        rows={4}
        {...rest}
      />
    </div>
  );
}