JSX 문법

앞에서 하던 것처럼 일일이 React.createElement()... 로 하는 것은 번거롭기 때문에, JSX 문법으로 대신 쓸 수 있다. 

createElement() => JSX로의 변화 및 JSX 규칙

1. 첫번째 파라메터 => 태그명으로 변경
2. 두번째 파라메터 => 태그의 속성명으로 변경
3. 세번째 이후 파라메터 => 모두 자식 노드로 변경
4. class, for 의 속성명 => className, htmlFor로 변경
5. 자바스크립트 표현식 => {} 를 사용
6. 반드시 닫는 태그가 있어야 한다.

const title = 'My First React Element';
const desc = 'This is a ';
const myTitleId = 'main-title';
const name = 'ldk';
 
const header = (
  <header>
    <h1 id={myTitleId}>{name} is {title}</h1>
    <p className="main-desc">{desc}
      <strong>Description</strong>
    </p>
  </header>
);
 
console.log(header);
 
ReactDOM.render(header, document.getElementById('root'));