JSX.IntrinsicElements 이란

JSX.IntrinsicElements 이란 

 

React + TS. 형태로 코딩 중에 있는데 간혹 IntrinsicElements & 어쩌구 에러가 발생하곤 했다.

대부분 컴포넌트 네임의 첫문자를 대문자로 하지 않거나 Props 부분에 없는 속성 값을 호출 하거나 하면 발생하는 게 대부분이였다.

 

근데 IntrinsicElements 얘는 대체 머지????

나도 좀 헷갈리는 부분이긴 하지만 머 어찌되었건 웹스톰에서 cmd+클릭하면 해당 부분 클래스나 인터페이스 선언된 부분으로 찾아들어가 볼 수 있다. 해서 바로 들어가 봤더니 두둥!!!  아래와 같이 선언되어 있었다.

declare namespace JSX {
    interface IntrinsicElements {
         ......중략.......
         a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
         button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
         div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
         img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
         p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
         li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
         span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
         ......중략.......
    }
}

그렇다  IntrinsicElements 얘는 그냥 HTML에서 사용되는 태그들을

key:value 로 묶여진 즉 html 태그들 집합소? 같은 형태로 되어 있다.

 

음 코드를 짜고 한번 호출을 해보았다.

const Div: JSX.IntrinsicElements['div']=<div></div>;

console.log( Div );

그랬더니 다음과 같이 확인할 수 있었다.

으음 그냥 div 인걸 아는데 굳이 이걸 어따써?????? 라는 생각이 들었다.

좀 더 검색해 보니 아래와 같은 설명을 찾아 볼 수 있었다.

 

https://typescript-kr.github.io/pages/jsx.html

TypeScript 한글 문서

내장 요소 (Intrinsic elements)

내장 요소는 특수 인터페이스 JSX.IntrinsicElements에서 조회됩니다. 기본적으로 이 인터페이스가 지정되지 않으면 그대로 진행되어 내장 요소 타입은 검사되지 않습니다. 그러나 이 인터페이스가 있는 경우, 내장 요소의 이름은 JSX.IntrinsicElements 인터페이스의 프로퍼티로 조회됩니다. 예를 들어:

declare namespace JSX {
    interface IntrinsicElements {
        foo: any
    }
}

<foo />; // 성공
<bar />; // 오류

위의 예제에서 <foo />는 잘 동작하지만, <bar />는 JSX.IntrinsicElements에 지정되지 않았기 때문에 오류를 일으킵니다.

참고: 다음과 같이 JSX.IntrinsicElements에 catch-all 문자열 인덱서를 지정할 수도 있습니다.

declare namespace JSX {
    interface IntrinsicElements {
        [elemName: string]: any;
    }
}

 

라고 한다.

 

정리 - JSX.IntrinsicElements 는 TSX 에서 사용할 수 있는 모든 HTML 요소 타입을 나열하면 각 요소의 태그 이름을 속성과 자식타입으로 매핑한다. 

 

딱히 머 코드를 짜면서 신경 쓸 거는 없지만 제네릭을 요구 하는 공통 컴포넌트 작성시엔 컴포넌트에 명확한 지정을 위해 해당

IntrinsicElements 에 대해서 알아두어야 할 거 같다.