[React] DetailedHTMLProps와 HTMLAttributes 이해하기

HTML 요소는 웹 페이지의 구조를 정의하는 데 사용되며, 각 요소는 다양한 속성(attributes)을 가질 수 있다.
예를 들어 input 요소는 type, value, onChange 등의 속성을 가질 수 있다.

<input type="text" value="Hello" onChange="handleChange" />

React에서는 이러한 HTML 요소들을 컴포넌트로 사용한다. TypeScript와 함께 사용할 때, HTML 요소의 속성을 타입으로 정의하여 컴포넌트의 Props를 관리할 수 있도록 DetailedHTMLProps와 HTMLAttributes를 제공한다.

 

HTMLAttributes

---

모든 일반적인 HTML 속성들을 포함하는 타입이다. 이 타입은 특정 HTML 요소가 가질 수 있는 모든 속성들을 정의한다.
예를 들어, div 요소의 속성을 정의하려면 HTMLAttributes 타입을 사용할 수 있다.

import { HTMLAttributes } from 'react';

type divProps = HTMLAttributes<HTMLDivElement>;

이렇게 하면 divProps 타입은 div 요소가 가질 수 있는 모든 속성들을 포함하게 된다.

 

DetailedHTMLProps

---

특정 요소의 props를 더 구체적으로 정의하는 데 사용된다.

 

DetailedHTMLProps 제네릭 타입 매개변수

DetailedHTMLProps는 두 개의 제네릭 타입 매개변수를 받는다. 이 두 매개변수는 HTML 요소의 속성을 정의하고, 해당 요소의 타입을 지정하는 데 사용된다.

type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E & ClassAttributes<T>;

첫 번째 매개변수: E

첫 번째 매개변수 E는 요소의 기본 속성을 나타내는 타입이다. HTMLAttributes<T>를 확장하여 HTML 요소가 가질 수 있는 일반적인 속성들을 포함한다. 이 매개변수를 통해 해당 HTML 요소가 어떤 속성들을 가질 수 있는지를 정의한다.

두 번째 매개변수: T

두 번째 매개변수 T는 실제 HTML 요소의 타입을 나타낸다. 이 매개변수는 HTML 요소의 타입을 지정하여, 어떤 요소의 속성을 다루고 있는지를 명확하게 한다.

 

두 제네릭 매개변수를 사용하여 속성 확장에 유연하면서 요소를 명확하게 할 수 있다. 이는 타입 안정성, IDE의 자동완성, 일관성, 유연성 등을 확보할 수 있는 방법이다.

import { DetailedHTMLProps, HTMLAttributes } from 'react';

interface CustomDivAttributes extends HTMLAttributes<HTMLDivElement> {
    customProp?: string;
}

type CustomReactDivProps = DetailedHTMLProps<CustomDivAttributes, HTMLDivElement>;