jsx>리액트를 사용할 때 필수

JSX란 Asyntax Extension to JavaScript

자바스크립트 확장문법

JavaScript+XML/HTML을 합친 문법

대입연산자처럼 왼쪽의 자료형에 html을 넣을 수 있다.

h1태그로 둘러쌓인 문자열을 element에 넣을 수 있게 된다.

JSX의 역할

JSX는 XML/Html을 js로 변환하는 과정을 진행하게 된다.

jsx코드를 자바스크립트로 변환하는 것이

React의 createElement함수이다.

이 코드를 보면 Hello 리엑트 컴포넌트가 자바스크립트 코드와 html코드를 같이 사용하여 리액트 돔으로 실제 화면에 렌더링하고 있다.

이렇게 자바스크립트 코드로만 보면 훨씬 복잡해진다.

리액트는 결국 내부적으로 html이나 xml문법을 사용하면

자동으로 createElement로 객체를 생성해주는 것이다.