[Typescript React] JSX 문법

---

JSX, TSX ?

JSX는 DOM 요소를 표현하기 위해 사용하는 React의 태그문법입니다.

HTML의 태그문법과 유사하기 때문에 배우는데 큰 어려움은 없습니다.

아래의 태그문법에서 element의 우측값이 문자열도 HTML도 아님에 주목해주세요.

이 문법을 사용하려면 tsx확장자로 코드를 작성해야 합니다.

const element: JSX.Element = (
  <h1>
    Hello, World!
  </h1>
);

이제 내부적인 관점에서 살펴보자면, 

JSX 문법은 아래처럼 JSX 객체로 변환된 뒤에 element에 저장됩니다.

즉, JSX 문법은 필수가 아니라는 뜻이죠.

const element: JSX.Element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

---

기본적인 JSX 사용방법

JSX 문법 도중에 중괄호를 사용하면 표현식을 사용할 수 있습니다.

특히, JSX 객체는 렌더링되기 전에 모든 값을 이스케이프하기 때문에,

클라이언트의 입력을 JSX 객체에 포함시키면 인젝션 공격(XSS)을 막을 수 있습니다.

const str: string = 'Hello, World!';
const element: JSX.Element = (
  <h1>
    {str}
  </h1>
);

JSX 객체는 자식을 가질 수 있습니다.

const element: JSX.Element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

더블쿼터를 사용하면 문자열도 정의할 수 있고,

자식이 없다면 스스로 닫을 수도 있습니다.

const element: JSX.Element = <div tabIndex="0" />;

---

주의사항

JSX 파일은 React 모듈을 사용하지 않더라도 import해야 합니다. 

JSX 코드를 컴파일할 때, (import되지 않았더라도) React.createElement( )를 호출하기 때문입니다.

// helloWorld.tsx는 에러가 발생합니다.
// import React from 'react';

const str: string = "Hello, World!";
console.log(str);

사용자가 정의한 컴포넌트의 이름은 반드시 대문자로 시작해야 합니다.

소문자로 시작하는 것은 <div>나 <span>같은 빌트인 컴포넌트라는 것을 의미합니다.

만약, 컴포넌트의 이름이 소문자라면 임시방편으로 대문자로 시작하는 변수에 담아 사용할 수 있습니다.

import React from "react";

// Wrong!
// 사용자 컴포넌트의 이름은 대문자로 시작해야 합니다.
class hello extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}
// const wrongElement = <hello />;

// Quick fix
// 어쩔 수 없는 경우에는 대문자로 시작하는 변수에 넣어야 합니다.
const Hello = hello;
const goodElement: JSX.Element = <Hello />;

대문자로 시작하는 변수에 컴포넌트를 담는 테크닉을 응용하면 

동적으로 컴포넌트를 결정할 수 있습니다.

import React from "react";

class LogoutPannel extends React.Component {}
class LoginPannel extends React.Component {}

let isLogin: boolean = false;
let Pannel = isLogin ? LogoutPannel : LoginPannel;
let element = <Pannel />;

true, false, undefined, true는 JSX 안에서 유효한 값이지만, 단순히 렌더링되지 않습니다.

아래의 JSX 표현식은 모두 동일하게 렌더링됩니다.

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

자바스크립트에서 false && expr 표현식은 expr로 평가되고, true && expr 표현식은 true로 평가됩니다.

이러한 특성을 이용하면, 메시지가 존재할 때 알람을 띄울 수 있습니다.

메시지가 없다면 아무런 요소도 렌더링 하지 않습니다.

<div>
  {messages.length > 0 && <Alert /> }
</div>

단, 0 && expr 표현식을 주의하세요. 

위에서 설명한 규칙에 의해 0으로 평가되는데,

리액트는 0을 숫자로 인식하기 때문에 정상적으로 렌더링합니다.

즉, 아래 컴포넌트는 메시지가 없다면 0을 페이지에 넣어버립니다.

<div>
  {messages.length && <Alert /> }
</div>

---

참고 문헌

React Quick Start 가이드 - JSX 소개

React Advanced 가이드 - JSX 톺아보기