JSX란?

1. JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다.
2. JSX는 react 프로젝트를 개발할 때 사용되는 공식적이지 않은 자바스크립트 문법.
3. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

function App(){
	return (
		<h2>react</h2>
	);
}
//위코드를 아래코드로 변환
function App() {
	return React.createElement("h1", null, "react");
}

1. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
2. 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

JSP문법

반드시 부모 요소 하나가 감싸는 형태여야 한다

Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

ex) error

function App() {
	return (
		<div>Hello</div>//2개의 요소가 있기 때문
		<div>GodDaeHee!</div>
	);
}

ex) 정상

function App() {
	return (
		<div>
			<div>Hello</div>//div로 감싸서 요소를 1나로 만듬
			<div>GodDaeHee!</div>
		</div>
	);
}
//div외에도 <Fragment> <></>등으로 도 가능

자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

function App() {
	const name = 'busoma';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>//busoma
		</div>
	);
}

if문(for문) 대신 삼항 연산자(조건부 연산자) 사용