<div />가 있다.
div 태그에 href라는 attribute를 주면 어떻게 될까?
당연히 속하지 않은 타입이라고 컴파일 에러가 나온다.
그렇다면 도대체 리액트(혹은 타입스크립트)는 div에 href가 없다는 것을 어떻게 알고 있을까.
HTML 태그들에 대해 어떻게 타입 검증을 하고 있는지 알아보자
1. IntrinsicElements
먼저 button, input 등 props를 커스텀할 때 자주 쓰이던 이 타입을 알아야 한다. 이 타입은 정확하게 무슨 타입일까?
먼저, IntrinsicElements는 타입스크립트에서 JSX 요소의 타입을 정의하기 위한 전역 인터페이스다.
좀 더 자세히 알아보기 위해 아래 예제를 보자.
TML태그와의 혼동을 피하기 위해 컴포넌트의 첫글자는 대문자로 해야함은 리액트의 규칙이다. 그런데 첫글자를 소문자로 해버리면 에러가 나온다.
myNewElement 가 JSX.IntrinsicElements에 없다는 것인데, 그럼 JSX.IntrinsicElements를 안 볼 수가 없다.
JSX.IntrinsicElements의 데피니션 파일을 보자.
모든 HTML 태그가 전부 키:밸류 쌍으로 있는 것처럼 보인다.
그럼 IntrinsicElements 인터페이스에 myNewElement를 추가해보자.
에러가 사라진 것을 확인할 수 있다.
2. ElementType
타입을 쓰다보면 종종 마주치는 녀석이지만 정확히 어떤 타입인지 모른채 대충 엘리먼트 관련이겠거니 추측하는 ElementType
ElementType는 JSX 컴포넌트와 사용자 정의 컴포넌트를 둘 다 받을 수 있는 타입이다. 특이점한 점은 props 기반 타입 추론 가능이 가능하다는 것인데,
이런 타입을 하나 만들고 ElementType통해 새로운 타입을 만들면 audio, video 타입으로 추론된다.
3. ComponentType
비슷하면서도 다른 ComponentType은 함수형과 클래스형 컴포넌트에서만 사용되고 ElementType과 다르게 HTML 태그가 사용불가하다. 그리고 가장 중요한 정확한 props 일치 요구한다.
보통 우리가 사용하는 컴포넌트 props가 해당되겠다.
4. HTML Attribute
자, 그럼 처음에 말했던 div에 href가 없다는 것을 어떻게 알고 있을까에 대해 말해보자.
일단 IntrinsicElements 가 태그와 attribute에 관여하고 있다는 것은 알았다.
div 는 JSX.IntrinsicElements 에 위와 같이 정의 되어 있다.
그리고JSX.IntrinsicElements 에서 눈여겨 볼 점은 모든 태그에 HTMLAtrributes라는 타입이 있다는 것이다.
HTMLAtrributes를 살펴보면 대략 아래와 같이 구성되어 있다.
보이는 것처럼 HTMLAtrributes는 모든 html 태그들의 공통 타입이다. (조상타입) 그리고 Aria, DOM 관련 타입을 확장해서 받고 있다.
즉, 리액트는 React.HTMLAtrributes을 통해 태그들의 타입을 알고 있다.
그리고 DetailedHTMLProps 타입이 눈에 띈다.
DetailedHTMLProps 는 표준 속성(HTMLAtrributes)에 React의 전용 속성(ref, key) 결합한 것이다.
아래와 같이 네이티브 HTML을 커스텀하거나 다형성을 확장할 때 주로 사용할 수 있는 타입이다.
리액트(+타입스크립트)의 전체 타입 스트럭쳐를 이해하는 것이 추후 개발 과정에서 타입을 재정의하거나 커스텀할 때 매우 용이하다!
참고: total typescript
