React JSX 🙄🙄

JSX란 ❓

Javascript에 XML을 추가한 확장한 문법이다
JSX로 작성한 코드는 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
JSX 공식적인 자바스크립트의 문법은 아니다.

JSX 규칙 🟠

1. 반드시 부모요소로 감싸야 한다.

const App = () => {
  return(
    <div>
    	<h1>반드시 부모요소로 감싸야 한다</h1>
    </div>
   )

2. 자바스크립트 표현식

JSX 안에서 {}로 감싸면 자바스크립트를 작성할 수 있다

const App = () => {
  const title = '반드시 부모요소로 감싸야 한다';
  return(
    <div>
    	<h1>{title}</h1>
    </div>
   )

3. 조건부 연산자

JSX 내부에서는 if문과 for문을 사용할 수 없다. 그렇기 떄문에 JSX밖에서 if문과 for문 등을 작성하거나, 삼항연산자(조건부 연산자)를 사용하자

const App = () => {
  const title = 'h1';
  return(
    <div>
    	{title === 'h1' ? <h1>삼항연산자</h1> : <h1>Title</h1>}
    </div>
   )

https://ko.reactjs.org/docs/introducing-jsx.html
https://goddaehee.tistory.com/296