JSX

JavaScript를 확장한 문법으로,
렌더링 로직을 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결하기 위해 React와 함께 사용할 것을 권장하며,
React의 element를 생성하는 역할을 한다.

JSX과 표현식

JSX에 표현식 포함하기

JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

JSX도 표현식이다

컴파일이 끝나면, JSX 표현식이 정규 Javascript 함수 호출이 되고 JavaScript 객체로 인식된다.

따라서 JSX를 if 구문이나 for loop 안에 사용하거나, 변수에 할당하거나, 인자로서 받아들이거나, 함수로부터 반환할 수 있다.

JSX는 주입 공격을 방지한다

React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 Escape하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
따라서 XSS(cross-site-scripting) 공격을 방지한다.

JSX는 객체를 표현한다

Babel은 JSX를 React.createElement() 호출로 컴파일한다.
다음 두 예시는 동일하다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

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

Ref

https://ko.reactjs.org/docs/introducing-jsx.html