JSX 란?

1. Javascript + XML
2. 리액트로 프로젝트를 개발 할 경우 사용하기에 공식적인 자바스크립트 문법 X

JSX 장점

1. 대소문자 구별
2. 주입공격 방지
3. 객체 표현

JSX 규칙

1. 반드시 부모 요소 하나가 감싸는 형태이어야 한다.
   컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야함.

function App(){
    return(
    	<div>
        	<h1>테스트1</h1>
        	<h2>테스트2</h2>
        </div>
    )
}

2. 자바스크립트의 값을 JSX 안에서 렌더링 할 수 있다.

function App() {
		const name = "공부";
   return(
   <>
   	<h1>{name}</h1>
    <h2>test</h2>
   </>
  );
 }

3. If문 대신 삼항 연산자 (조건부 연산자) 를 사용한다.

function App(){
	const name = 'react';
	return(
    	<div>
        	{name === 'react'? (<h1>This is react</h1>) : (<h2>This isn't react</h2>)}
        </div>
    )
}

4. AND 연산자를 이용한 조건부 렌더링

function App(){
	const name = 'rreact';
	return(
    	<div>
        	{name === 'react' && <h1>It's correct</h1>}
        </div>
    )
}