JSX

const element = <div>this is JSX</div>;

js안에 작성되었지만 html태그도 있고 문자열 처럼 보이기도 하는 이 코드는 JSX라고 불리는 언어인데

브라우저가 실행되면 이 코드는 바벨에 의해서 JSX->JS 로 변환된다

babel 사이트에서 JSX->js로 변환한 코드

변환된 코드를 보면 리액트 엘리먼트를 생성해서 반환한다

화면에 뭔가를 그릴 때 마다 리액트 엘리먼트를 우측의 코드처럼 생성해야한다면 너무 귀찮을 것이다

그래서 편의를 위해 JSX를 사용하는 것

자바스크립트 처럼 사용

JSX에서는 중괄호 안에서 모든 자바스크립트의 표현식을 쓸 수 있다

const language = 'JSX';
const element = <div>this is {language}</div>;

처럼 변수도 사용이 가능하며

function squart(n){
  return n*n
}
const value = 2;

const element = <div>{squart(value)}</div>;

함수도 사용이 가능하다