JSX(Javascript syntax extension)란

JSX(Javascript syntax extension)는 JavaScript XML의 약어로 React의 확장 문법이다.
리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다.

왜 js가 아닌 jsx를 사용하는가?

jsx는 React에서 UI 컴포넌트를 작성하기 위한 문법으로 일반적인 자바스크립트 코드에서 HTML 요소를 작성하는 것보다 가독성이 높고, 컴파일 시 문법 체크와 변환을 동시에 처리해주는 장점이 있다. 이후 babel과 같은 트랜스파일러를 이용하여 JSX 코드를 일반 JavaScript 코드로 변환하여 실행한다.

Babel이란?

Javascript 코드를 최신 버전의 문법으로 작성하더라도 구형 브라우저에서도 동작 할 수 있도록 변환해주는 도구이다.

예시

• JSX

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="John" />;

• Javascript

function Greeting(props) {
  return React.createElement('h1', null, `Hello, ${props.name}!`);
}

const element = React.createElement(Greeting, { name: 'John' });