TIL 24.12.13 input components props type 지정

기존에 input component를 제작할 때 타입을 다음과 같이 받아오고 있었다. 이렇게 하면 html 태그에 존재하는 props들을 타입으로 따로 지정하지 않아도 자연스럽게 받아올 수 있다

interface InputProps extends HTMLAttributes<HTMLInputElement> {
  type?: "email" | "password" | "text" | "number";
  placeholder?: string;
  disabled?: boolean;
  register?: any;
  width?: number | string | "full";
}

 

근데 다음처럼 작성하니까 value 가 타입에 맞지 않는다면서 에러가 생김.

     <Input type="text" value={weight} />

 

그래서 찾아보니까 다음과 같은 차이가 있었다.

 

 

1. HTMLAttributes

• 적용 대상: 모든 HTML 요소에 공통적으로 적용되는 속성을 정의합니다.
• 포함 속성: className, id, style, aria-* 속성 등 모든 HTML 요소에 공통적으로 존재하는 속성들만 포함됩니다.
• 제한: <input>, <textarea>와 같은 특정 요소에만 있는 고유 속성(value, onChange 등)은 정의되지 않습니다.

예를 들어, value나 onChange는 HTML의 <input> 요소에서만 사용 가능한 속성이므로 HTMLAttributes에는 포함되지 않습니다.

 

---

2. InputHTMLAttributes

• 적용 대상: <input> 태그에만 적용되는 고유 속성을 포함합니다.
• 포함 속성: HTMLAttributes에서 제공하는 공통 속성뿐만 아니라, <input> 전용 속성(value, onChange, type, checked 등)을 포함합니다.
• 사용 목적: <input> 요소를 다룰 때는 이 타입을 사용해야 오류가 발생하지 않습니다.

 

특성	HTMLAttributes	InputHTMLAttributes
적용 범위	모든 HTML 요소	<input> 태그 전용
포함 속성	공통 속성만	공통 속성 + <input> 고유 속성
value, onChange 지원	❌ 지원 안 함	✅ 지원
예시	<div>, <span> 등	<input>

 

 

따라서 타입은 다음과 같이 InputHTMLAttributes 를 사용한다.

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  type?: "email" | "password" | "text" | "number";
  placeholder?: string;
  disabled?: boolean;
  register?: any;
  width?: number | string | "full";
}