🚨JSX element 'T' has no corresponding closing tag.🚨

❗문제 내용

TypeScript Generic 문법을 사용하려는데 JSX element인 'T'가 closing tag를 가지고 있지 않다는 오류 발생.

⚒️ 문제 해결

이는 TypeScript 제네릭의 <> 문법이, JSX 구문과 겹치기 때문에 제네릭 타입을 JSX 태그로 인식하여 생기는 오류이다. 즉, 제네릭 타입을 사용하기 위해 <T>를 써야 하는데 JSX를 사용하는 파일에서는 이를 JSX로 인식하기 때문에 <T></T> 구조로 만들어져야 하는데 왜 앞의 것만 쓰느냐는 오류이다(ㅋㅋ)

이를 해결하기 위한 지혜로운 TypeScript 문법은 trailing comma를 사용하는 것이다.

export const Map = <T,>({...

이런 식으로 반점을 찍어주면 컴파일러는 내가 쓴 코드가 JSX 문법이 아니라는 걸 인식할 수 있다.

🙇‍♂️ 참고자료

• tsx파일의 화살표 함수에서 제네릭 사용시 에러: ... 'T' has no corresponding closing tag.