JSX

JSX란

: 자바스크립트의 확장 문법 >> 리액트 코드 작성 시 html 문법과 비슷한 JSX 문법을 사용하면 훨씬 더 편리하게 코드 작성 가능!⭐

HTML과 다른 점

1. 속성명은 camelCase 로 작성
   단, 비표준 속성 data-* 속성은 HTML 문법 그대로 작성

2. 자바스크립트 예약어와 같은 속성명은 사용 불가
   ex) for >> htmlFor / class >> className

3. 반드시 "하나의 요소"로 감싸야 함
   Fragment >> 빈태그로 작성 ok

자바스크립트 표현식

{} 를 활용하면 자바스크립트 표현식 사용 가능

import ReactDOM from 'react-dom';

const product = '초콜릿';

ReactDOM.render(
  <h1>나만의 {product} 커스텀하기</h1>,
  document.getElementById('root')
);

단, 중괄호 안에서 for 또는 if 문의 문장은 사용할 수 없음