import React from 'react'

function Button() {
  return (
    <button type="submit" className="bg-yellow-300 p-4 rounded-xl">
      저장하기
    </button>
  )
}

export default Button

import React from 'react'

// "string" => string literal type => 원소가 1개인 집합
// string => 모든 가능한 문자열들의 타입 => 원소가 매우 많은 집합!

function Button({ type, children }: { type: 'submit' | 'button'; children: string }) {
  return (
    <button type={type} className="bg-yellow-300 p-4 rounded-xl">
      {children}
    </button>
  )
}

export default Button

import React from 'react'

type ButtonProps = React.ComponentProps<'button'> // <- 중요!

function Button({ type, children, className }: ButtonProps) {
  return (
    <button type={type} className={'bg-yellow-300 p-4 rounded-xl ' + className}>
      {children}
    </button>
  )
}

export default Button

import React from 'react'

type ButtonProps<C extends React.ElementType = 'button'> = React.ComponentProps<C> & {
  as?: C
  className: string
  children: React.ReactElement
}

function Button<C extends React.ElementType>({
  as,
  className,
  children,
  ...props // as, className, children을 제외한 나머지 props는 props 객체로 받는다
}: ButtonProps<C>) {
  const Component = as || 'button'

  return (
    <Component
      className={
        'bg-yellow-300 hover:bg-yellow-400 transition-colors duration-200 p-4 rounded-xl ' +
        className
      }
      {...props} // props 객체에 있는 모든 prop을 Component에 넘긴다
    >
      {children}
    </Component>
  )
}

export default Button