[React] JSX

> JSX (Javascript syntax extension)

const hi = <p>Hi</p>;

이거슨 js, html 둘다 아니다. JSX다. html과 매우 흡사하고 js파일 내에서 작성이 가능하다. JSX는 원래의 js 문법이 아니기 때문에 .js 파일내에 JSX문법이 있으면 브라우저에서 해석을 못해 syntax error가 난다.

리액트를 쓰기 위해 jsx문법이 포함되어 있으면, 해당 파일을 정규 js 문법으로 변환시키는 컴파일 과정이 필요하다.

> JSX element

html문법을 js 코드 내부에 써주면 그거시 바로 JSX다! 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

> JSX attribute

태그에 attribute(이하 속성)을 주고 싶을 땐 항상 " " 쌍따옴표로 감싸야 한다. 속성을 추가하고 싶을 때는 실제 html에서 쓰는 속성명과 다를 수 있다.

예를들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 classNam을 사용해야 한다.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

> Self-Closing Tag

그리고 JSX에서는 어떤 태그라도 self closing tag가 가능하다. ''과 같이 하나의 태그 요소인 경우에는 ''과 같이 항상 '/'으로 끝내줘야 한다. '

const good = (
<div>
    <p>hi</p>
</div>);

const wrong = (
<p>list1</p><p>list2</p>);
//좋지못하다

const right = (
  <div>
    <p>list1</p>
    <p>list2</p>
  </div>
);
//좋다

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);