JSX

JSX란? - React 공식웹사이트
React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

JSX(JavaScript eXtention) javascript의 확장버전
HTML문법을 js파일 내부에 쓴 것이다.

const name = "임꺽정"
const element = <h1>Hello My Name is {name}!</h1>;
}

여기서 const element =

Hello My Name is {name}!

;
} 이 부분이 jsx문법을 쓴 것이다.

const aaa = "Zuldom" 

function Hello() {

	return(
	<div>
	hello! my name is {aaa} 
	<div/>
	)
}

export default Hello

return안에 소괄호는 한줄만 있을 때 생략이 가능하다.

javascript 안에 ASI(Automatic Semicolon Insertion)이라고 자동 세미콜론 삽입을 해주는 기능이 있기 때문에
소괄호를 안넣어주면 javascript에서 return뒤에 ;을 자동으로 넣어서 출력이 안된다.

태그 안에 2개이상에 태그가 있을 땐 꼭 전체를 감싸는 태그가 있어야 실행이 되고,

div나 박스로 묶기 싫다면 react fragment라고 하는 빈 <></>를 사용할 수 있다.

aaa라는 변수를 중괄호 안에 적으면 태그 안에서 사용할 수 있다.

원래 HTML과 JS를 따로 쓰지만 이처럼 js내에서 HTML요소를 만들고 쓸 수 있다.

위 코드에서 알 수 있듯이 JS내에서 html을 만들 수 있으니 가독성이 뛰어나다.

출처: https://ko.reactjs.org/docs/introducing-jsx.html