자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(자바스크립트 XML)라고 한다.

JSX는 자바스크립트의 확장 문법이다.

JSX 문법을 이용하면 HTML 태그에서 자바스크립트의 표현식을 직접 사용할 수 있다.

function Body() {
  const number = 1; ①
  return (
    <div>
      <h1>body</h1>
      <h2>{number}</h2> ②
    </div>
  );
}
export default Body;

• 렌더링 확인 🖥️

JSX와 자바스크립트 표현식

표현식이란 값으로 평가되는 식이다. 즉, 10 + 20 같은 식은 결국 30으로 평가되기 때문에 표현식이라고 한다. JSX는 자바스크립트 표현식을 HTML 태그와 함께 사용할 수 있어 가독성 있는 코드를 작성할 수 있다.

✏️ 산술 표현식

산술 표현식이란 숫자로 표현되는 식을 말한다.

function Body() {
  const numA = 1;
  const numB = 2;
  return (
    <div>
      <h1>body</h1>
      <h2>{numA + numB}</h2> ①
    </div>
  );
}
export default Body;

• 렌더링 확인 🖥️

✏️ 문자열 표현식