TypeScript 공부하기 - React.InputHTMLAttributes<HTMLInputElement>

React.InputHTMLAttributes<HTMLInputElement>

 

핵심 개념:

React.InputHTMLAttributes<HTMLInputElement>는

React에서 <input> 태그를 사용할 때 쓸 수 있는 모든 속성(예: type="text", value="안녕", onChange={...})들을 모아놓은

"목록" 또는 "정의"라고 생각하시면 됩니다.

 

 

하나씩 자세히 살펴보자.

 

1. React.InputHTMLAttributes는 무엇인가요?

• React: 우리가 웹 페이지를 만들 때 사용하는 도구(라이브러리) 이름입니다.
• HTMLAttributes: HTML 태그(예: <input>, <button>, <div> 등)에는 여러 가지 **속성(Attribute)**들이 붙을 수 있어요. 예를 들어, <input type="text" value="안녕하세요">에서 type과 value가 속성입니다. HTMLAttributes는 이런 HTML 태그들이 가질 수 있는 모든 일반적인 속성들을 정의해 놓은 "목록"이라고 생각하시면 됩니다.
• InputHTMLAttributes: 그 중에서도 특히 <input> 태그에만 해당하는 속성들(예: placeholder, checked, maxLength 등)을 추가로 정의해 놓은 "목록"입니다.

정리하자면, React.InputHTMLAttributes는 "React에서 HTML <input> 태그에 사용할 수 있는 속성들의 모음"이라고 보시면 됩니다.

 

 

2. 괄호 안의 <HTMLInputElement>는 무엇인가요?

 

• <HTMLInputElement>는 "이 속성 목록이 어떤 HTML 요소에 대한 것인지"를 알려주는 일종의 "꼬리표" 또는 "지정자"입니다.
• HTMLInputElement: 웹 브라우저가 <input> 태그를 인식하고 다룰 때 사용하는 특별한 이름입니다. 자바스크립트에서 <input> 태그를 만들거나 접근할 때 이 HTMLInputElement라는 "객체"를 사용해요.

따라서, <HTMLInputElement>는 InputHTMLAttributes가 <input> 태그에 대한 속성 목록이라는 것을 TypeScript에게 정확히 알려주는 역할을 합니다.

 

만약 <HTMLDivElement>라고 되어 있다면 <div> 태그의 속성 목록이 되겠죠? 이렇게 괄호 안에 어떤 HTML 요소인지 지정해 줌으로써, TypeScript가 개발자가 잘못된 속성을 사용하지 않도록 도와줍니다.

 

 

3. extends는 무슨 말인가요?

 

extends는 보통 어떤 "정의"나 "목록"이 다른 "정의"나 "목록"의 내용을 포함하고 확장한다는 의미로 사용됩니다.

 extends React.InputHTMLAttributes<HTMLInputElement>와 같이 사용되었다면, 그것은 아마도 여러분이 직접 만든 어떤 "속성 목록"이 React.InputHTMLAttributes<HTMLInputElement>가 가진 모든 속성들을 그대로 물려받고, 거기에 추가로 몇 가지 속성을 더 넣고 싶을 때 사용했을 가능성이 높습니다.

 

예시를 들어볼게요:

우리가 <MyCustomInput>이라는 특별한 입력창 컴포넌트를 만든다고 가정해봅시다. 이 입력창은 일반적인 <input> 태그의 속성들(type, value, onChange 등)을 모두 사용할 수 있으면서, customProp이라는 우리만의 특별한 속성도 가질 수 있게 하고 싶어요.

이럴 때 TypeScript에서는 다음과 같이 정의할 수 있습니다:

// MyCustomInputProps는 React.InputHTMLAttributes<HTMLInputElement>의 모든 속성을 가져오고,

// 여기에 'customProp'이라는 새로운 속성을 추가합니다.

interface MyCustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {

  customProp?: string; // 우리가 추가하고 싶은 특별한 속성

}



// 이제 MyCustomInput 컴포넌트는 일반 input 속성과 customProp을 모두 받을 수 있습니다.

function MyCustomInput(props: MyCustomInputProps) {

  // ... 컴포넌트 내용 ...

  return <input {...props} />; // props를 그대로 input에 전달

}

여기서 extends는 MyCustomInputProps가 React.InputHTMLAttributes<HTMLInputElement>의 모든 속성들을 "복사"해 와서 기본으로 가지고 있고, 그 위에 customProp을 얹어서 더 풍부한 속성 목록을 만든다는 의미입니다.

 

최종 요약:

React.InputHTMLAttributes<HTMLInputElement>는 React에서 <input> 태그에 사용할 수 있는 모든 표준 속성들(예: type, value, placeholder 등)을 TypeScript가 이해할 수 있도록 정의해 놓은 "속성 목록"입니다.

그리고 extends는 이 목록의 내용을 다른 곳에서 재사용하거나 확장할 때 쓰는 문법입니다.