📌 JSX 문법

HTML과 다른 속성명

1. 속성명은 카멜케이스(Camel Case)로 작성

여러 단어가 조합된 HTML 속성들은 카멜 케이스로 작성한다.
onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 등과 같은 속성

2. 예외적으로 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스(Camel Case)가 아니라 기존의 HTML 문법 그대로 작성해야 한다.

 <button className="btn" data-status="대기중">대기중</button>

3. 예약어와 같은 속성명은 사용할 수 없다

for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없습니다.

• for -> htmlFor
• class -> className

    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />

4. 반드시 하나의 요소로 감싸기 - Fragment

부모 태그를 만들어 하나의 요소로 만들어 주어야 합니다.

  <div>
    <p>안녕</p>
    <p>리액트!</p>
  </div>
  
  <Fragment>
    <p>안녕</p>
    <p>리액트!</p>
  </Fragment>,
  
  <>
    <p>안녕</p>
    <p>리액트!</p>
  </>,

5. 중괄호 안에는 표현식만 가능하다!

• ❌ if 문
• ❌ for 문
• ❌ 함수 선언
• ❌ 자바스크립트 문장

root.render(
  <>
    <h1>나만의 {item} 주문하기</h1>
    <button onClick={handleClick}>확인</button>
  </>
);