[TypeScript] does not exist on type 'jsx.intrinsicelements'

문제 상황

modal 안에 들어갈 content 컴포넌트를 만들고 있었는데, 만든 컴포넌트를 불러오는 과정에서 does not exist on type 'jsx.intrinsicelements' 에러가 발생했다.

코드

import { Modal } from "antd";

export const content = () => {
  return (
    <>
      <div>title</div>
      <div>content</div>
    </>
  )
};

export const ConfirmModal = ({ values, callback }) => {
  return Modal.info({
    title: `${values.title}`,
    // error 발생 
    content: <content />,
    okText: "확인",
    cancelText: "취소",
    onOk: callback,
    okCancel: true,
  });
};

해결 방법

이러한 오류는 JSX에서 지원되지 않는 속성이나 메서드를 사용하려고 할 때 발생할 수 있다. 해결하기 위해서는 아래와 같은 다양한 방법이 있다.

• 타입 정의 확인
• TypeScript 버전 확인
  • 때로는 TypeScript 버전 간의 호환성 문제로 오류가 발생할 수 있다.
• 타입 선언 추가

등등 다양한 방법이 있지만 내 경우는 아주 간단하게.. 컴포넌트의 이름을 Content 로 변경하니 해결되었다.

JSX에서 컴포넌트 식별
JSX에서는 컴포넌트와 HTML 태그를 구별하기 위해 컴포넌트 이름의 첫 글자가 대문자인지 여부를 사용한다.
대문자로 시작하면 컴파일러가 이를 컴포넌트로 인식하고, 소문자로 시작하면 일반 HTML 태그로 인식한다.

이러한 이유로 JSX 혹은 TSX 를 사용할 때는 컴포넌트 이름의 첫 글자를 대문자로 작성해야한다 ! 근데 가끔 까먹는다.
끗