JSX란?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다.
이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

※ 바벨

바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있다.

더 정확하게 말하면 트랜스파일러라고 말할 수 있다.

트랜스 파일 : 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것을 말하며 컴파일러의 일종이다

JSX

function App() {
  return (
    <div className="App">
      Hello <b>react</b>
    </div>
  );
}

1. 보기 쉽고 익숙하다
   일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 한번 비교해 보면 몇 초만 보아도 JSX를 사용하는 것이 가독성이 높고 작성하기도 쉽다.
2. 더욱 높은 활용도
   JSX에서는 HTML 태그를 사용할 수 있다.

JSX 문법

1. 컴포넌트에 여러 개의 요소가 있다면 반드시 부모 요소 하나로 감싸야한다.
   (리액트 v16 이상부터 도입된 Fragment라는 기능을 부모 요소로 사용 가능하다)
2. 자바스크립트 표현식 가능
3. if문 대신 3항 연산자나 AND 연산자(&&)를 사용하여 조건부 렌더링 가능
   (OR(||) 연산자를 사용하여 undefined나 null을 렌더링 하지 않을 수 있음
4. 인라인 스타일링 background-color 같은 - 문자가 포함되는 문자를 없애고 backgroundColor처럼 카멜 표기법으로 작성해야 합니다.
5. class 대신 className으로 사용

JSX는 HTML과 비슷하지만 완전히 똑같지는 않습니다.
XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 조금씩 차이가 납니다.