<aside> 👉🏿 Javascript의 확장 문법이다.

</aside>

<aside> 👉🏿 아래 JSX로 작성된 코드는 그 아래있는 코드와 같이 변형된다.

이러한 작업을 웹팩의 바벨 로더가 자동으로 해준다.

</aside>

function App() {
	return (
		<div>
			Hello World!
		</div>
	)
}

function App() {
	return React.createElement("div", null, "Hello World!");
}

JSX의 장점

<aside> 👉🏿 보기 쉽고 익숙

HTML 코드를 작성하는 것과 비슷해서 가독성이 높고 작성하기도 쉽다.

</aside>

<aside> 👉🏿 더욱 높은 활용도

div나 span 같은 HTML 태그를 사용할 수 있다.

컴포넌트도 JSX안에서 작성할 수 있다.

마치 HTML 쓰듯이 그냥 작성한다.

</aside>

ReactDOM.render?

<aside> 👉🏿 컴포넌트를 페이지에 렌더링하는 역할을 한다.

</aside>

React.StrickMode?

<aside> 👉🏿 리액트 프로젝트에서 리액트 레거시 기능들을 사용하지 못하게 한다.

완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력한다.

</aside>

JSX 문법

<aside> 👉🏿 다음 과 같은 규칙을 지켜야 한다.

</aside>