[React] 03. JSX

JSX

• JSX 는 Javascript의 확장 문법으로, XML/HTML 유사.
  • 브라우저에서 실행 전 자바스크립트 형태로 변환됨.
  • HTML 태그 사용 가능

1. 반드시 요소 여러개를 하나의 요소로 감싸야 한다.

// 올바른 코드
const element = (
<div>
	<h1>제목</h1>
	<p>내용</p>
</div>
);
// 잘못된 코드 
const element = ( 
	<h1>제목</h1>
	<p>내용</p>
);

---

2. if문은 사용 불가능하며 {}내 삼항 연산자 사용 가능하다.

// 올바른 코드
const element = (
<div>
	{number % 2 === 0 ? "짝수" : "홀수"
</div
)
// 잘못된 코드
const element = (
	<div>
	{
		if (number % 2 === 0) {
			"짝수"
			} else {
			"홀수"
			}
		}
	</div>
	)

---

2. if문은 사용 불가능하며 {}내 삼항 연산자 사용 가능하다.

// 문자열로 취급
const element = (
 <div>
   {"1 + 2"}
 </div>
);

// 표현식으로 취급
const element = (
 <div>
   {1 + 2}
 </div>
);

• JSX는 Babel을 통해 React.createElement함수 호출로 변환된다.