JSX ,TSX 정의

■ JSX (JavaScript XML)
     :  자바스크립트 코드 안에 HTML 태그를 XML 형태로 작성할 수 있게 해주는 문법으로서 JSX는 자바스크립트 문법의 확장이라고 할 수 있습니다.
<< jsx
     const element = <h1>Hello, world!</h1>;
>>
    ⓐ 자바스크립트 코드 안에 HTML 태그처럼 보이는 코드가 들어가는 것
    ⓑ 이걸 브라우저에서 인식 가능하도록 Babel 같은 트랜스파일러가 다음과 같은 코드로 변환해 줍니다.

<< js
     const element = React.createElement('h1', null, 'Hello, world!');
>>

■ TSX (TypeScript XML)
     :  TypeScript + JSX 즉, 타입스크립트를 사용하는 프로젝트에서 JSX 문법을 쓸 때 확장자가 .tsx 입니다.
<< tsx
      type Props = {
          name: string;
      }

      function Greeting({ name }: Props) {
          return <h1>Hello, {name}</h1>;
      }
>>
    ⓐ type Props = { name: string } : 타입스크립트 문법
    ⓑ <h1>....</h1> : JSX 문법
    : 두 개를 같이 쓰기 위해서 tsx 확장자를 사용합니다.

■ TSX : 사용 시기
  ⓐ 타입스크립트로 개발 중인데 JSX 문법을 쓴다면 무조건 .tsx 를 사용합니다.
  ⓑ 타입스크립트의 타입 검사를 활용해서 컴포넌트의 props, state 등에 타입을 명시할 때 사용합니다.
  ⓒ 예시
<< tsx
      type ButtonProps = {
         text: string;
      }

      const MyButton = ({ text }: ButtonProps) => {
          return <button>{test}</button>;
      }
>>