리액트에서 JSX가 필수는 아닙니다. JSX 없이도 리액트를 사용할 수는 있습니다. 하지만 JSX는 코드를 더 짧고 직관적으로 만들기 때문에 대부분의 리액트 개발에서 JSX를 기본으로 사용합니다. 지금은 사실상 리액트의 표준 문법으로 자리 잡았다고 볼 수 있습니다.

리액트에서 전체 코드를 JSX로 작성하는 것은 아닙니다. JSX는 HTML처럼 보이는 부분만 해당합니다. 즉, 다음 코드에서 return으로 반환되는 <div> 태그 요소만 JSX입니다. 나머지는 모두 자바스크립트입니다. 다음 코드를 봅시다.

App.tsx

export default function App() {
  return (
➊

    <div>                 
      <h1>Hello, React!</h1>
    </div>

  );
}

➊ JSX

이 코드에서 <div>와 <h1> 태그는 JSX이고, 함수 정의나 return 구문은 자바스크립트입니다.