1. JSX란?

JSX는 리액트 프로젝트에서 사용하는 문법으로
javascript와 html이 결합된 형태이다.

Babel은 JSX를 브라우저가 해석할 수 있는 Javascript 코드로 컴파일해준다.

• JSX는 Javascript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 javascript 코드가 아니다. 따라서 create react app 툴체인에 포함된 'Babel'이 JSX를 브라우저가 이해할 수 있는 javascript 코드로 컴파일해준다. 그러면 비로소 브라우저가 이것을 읽고 해석하여 화면에 렌더링한다.

2. JSX 규칙

1. 여러개의 엘리먼트는 부모 엘리먼트로 묶어준다.

1. <div></div> //o

2.  <div></div>
	<div></div> // x
    
    <div>
        <div></div>
    	<div></div>
	</div>          //o

2. 조건부 렌더링의 경우 if문 대신, 삼항연산자를 사용한다.

<삼항연산자의 구조>
조건 ? 참일때 리턴할 값 : 거짓일때 리턴할 값

<예시>
const isParkhacker = tweet.username === "parkhacker" ? "tweet__username tweet__username--purple" : "tweet__username";

3. 클래스 이름은 className을 사용한다.

<div class="greeting">Hello world!</div> // x
<div className="greeting">Hello world!</div> // o

4. javascript 표현식 사용시 {중괄호}를 사용한다.

function App() {
	const name = "Zoe Bae";
    return (
    	<div>
        Hello! {name}
        </div>
    );
}

5. 사용자 정의 컴포넌트는 대문자로 시작한다.

function hello() { // 소문자
	return (
    	<div>Hello!</div>
    )
}

function HelloWorld() {
	return (
    	<hello />
    )
} 

// x

function Hello() { // 대문자
	return (
    	<div>Hello!</div>
    )
}

function HelloWorld() {
	return (
    	<Hello />
    )
}

// o 

6. 여러개의 HTML 엘리먼트를 표시할 때, map() 함수를 사용한다.