HTMLInputElement / HTMLAttributes

정의하고싶은 것

• 이미 정의된 Input Component Props에 필요한 타입 추가하기
• React에서 정의한 interface에서 가져오기

해결 방법

• HTMLInputElement를 cmd + 클릭 해보면 아래와 같이 react에서 input 태그에 대한 속성, 메소드 등이 정의되어 있는 걸 볼 수 있다.

interface HTMLInputElement extends HTMLElement {
  /** Sets or retrieves a comma-separated list of content types. */
  accept: string;
  /**
     * Sets or retrieves how the object is aligned with adjacent text.
     * @deprecated
     */
  align: string;
  /** Sets or retrieves a text alternative to the graphic. */
  alt: string;
  /** Specifies whether autocomplete is applied to an editable text field. */
  autocomplete: string;
  capture: string;
  /** Sets or retrieves the state of the check box or radio button. */
  checked: boolean;
  /** Sets or retrieves the state of the check box or radio button. */
  defaultChecked: boolean;
  /** Sets or retrieves the initial contents of the object. */
  defaultValue: string;
  dirName: string;
  disabled: boolean;
  /** Returns a FileList object on a file type input object. */
  files: FileList | null;
  /** Retrieves a reference to the form that the object is embedded in. */
  readonly form: HTMLFormElement | null;
  /** Overrides the action attribute (where the data on a form is sent) on the parent form element. */
  ... 생략

• 정의된 속성 중 원하는 속성을 가져와서 props로 정의하면 된다.

interface InputProps {
  css: CSS
  size: keyof typeof sizeVariants.inner & keyof typeof sizeVariants.outer
  isDisabled: boolean
  placeholder: string
  leftSocket: ReactNode
  rightSocket: ReactNode
  onChange: (event: ChangeEvent<HTMLInputElement>) => void
  value: string | number // 여기까지는 기존 부분
  type: HTMLInputElement['type'] // 여기서부터 추가한 부분
  multiple: HTMLInputElement['multiple']
  accept: HTMLInputElement['accept']
}

• [input type=file]에 id 필드를 추가하고 싶은데 HTMLInputElement에는 id가 정의되어 있지 않고 HTMLAttributes에서 확인이 가능하다. HTMLAttributes를 cmd + 클릭 해보면 아래와 같이 정의되어 있다.

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
  // React-specific Attributes
  defaultChecked?: boolean | undefined;
  defaultValue?: string | number | ReadonlyArray<string> | undefined;
  suppressContentEditableWarning?: boolean | undefined;
  suppressHydrationWarning?: boolean | undefined;

  // Standard HTML Attributes
  accessKey?: string | undefined;
  className?: string | undefined;
  contentEditable?: Booleanish | "inherit" | undefined;
  contextMenu?: string | undefined;
  dir?: string | undefined;
  draggable?: Booleanish | undefined;
  hidden?: boolean | undefined;
  id?: string | undefined;
  lang?: string | undefined;
  placeholder?: string | undefined;
  slot?: string | undefined;
  spellCheck?: Booleanish | undefined;
  style?: CSSProperties | undefined;
  tabIndex?: number | undefined;
  ... 생략

• id도 추가로 정의하면 아래와 같이 정의할 수 있다.

interface InputProps {
  css: CSS
  size: keyof typeof sizeVariants.inner & keyof typeof sizeVariants.outer
  isDisabled: boolean
  placeholder: string
  leftSocket: ReactNode
  rightSocket: ReactNode
  onChange: (event: ChangeEvent<HTMLInputElement>) => void
  value: string | number
  type: HTMLInputElement['type']
  multiple: HTMLInputElement['multiple']
  accept: HTMLInputElement['accept']
  id: HTMLAttributes<HTMLInputElement>['id'] // 추가한 부분
}