JSX

의미

💡 JavaScript XML의 줄임말
💡 React에서 UI를 구성할 때 사용하는 JavaScript를 확장한 문법

과정

JSX -> bable로 컴파일 -> JavaScript로 변환 -> 브라우저에서 렌더링

구현

📗 JSX없이 구현하기

function App(){
  return React.createElement("h1", null, "Hello, world")
}

📗 JSX로 구현하기

function App(){
  return <h1>Hello, world</h1>
}

주의

📗 전체를 감싸주는 엘리먼트 필요

function App(){
  return (
    //ERROR!!
  	//<div>a</div>
    //<div>b</div>
    <div>
      <div>a</div>
      <div>b</div>
    </div>
  )
}

📗 배열 반환은 가능

function App(){
  return (
  	[<div>a</div>, <div>b</div>]
  )
}

📗 표현식의 경우 {} 사용

function App(){
	const func = () => {
		return <p>a</p>;
	}

	return (
    	<span onClick={func}></span>	
    );
}

📗 표현식이라도 함수 자체 호출시

function App(){
	const func = () => {
		return <p>a</p>;
	}

	return (
    	<div>{func()}</div>
    );
}

📗 삼항연산자는 표현식

const a = <div>{(1 + 1 === 2) ? (<p>true</p>) : (<p>false</p>)}</div>