<aside> 💡 JSX?? (JavaScript XML)

</aside>

JSX란?

자바스크립트 확장 문법이다. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하여 더 편리하게 화면에 나타낼 코드를 작성할 수 있게된다.

규칙

HTML 과 다른 속성명

1. 속성명은 카멜 케이스로 작성하기

JSX 문법을 사용할 때 카멜 케이스로 작성해야하는 규칙이 있다.

onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 같은 속성들을 작성할 때 카멜 케이스로 작성한다.

예외적으로 HTML 에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 기존 HTML 문법을 사용하면 된다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <button onClick= ... >클릭!</button>, // 카멜 케이스 작성
  document.getElementById('root')
);

ReactDOM.render(
  <div>
    상태 변경: 
    <button className="btn" data-status="대기중">대기중</button> // data 속성은 HTML 문법 그대로
    <button className="btn" data-status="진행중">진행중</button>
    <button className="btn" data-status="완료">완료</button>
  </div>,
  document.getElementById('root')
);

2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다.

HTML 문법 중 for 문법은 자바스크립트 반복문의 키워드 for 와 겹치기 때문에 htmlFor 로

HTML의 class 속성도 자바스크립트의 class 키워드와 겹치기에 className 으로 작성해야한다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <form>
    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />
  </form>,
  document.getElementById('root')
);

Fragment

JSX 문법을 활용할 때는 반드시 하나의 요소로 감싸줘야하기에 추가적인 DOM 노드를 생성하지 않고 싶을 때 사용한다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <Fragment>
    <p>안녕</p>
    <p>리액트!</p>
  </Fragment>,
  document.getElementById('root')
); // 프라그먼트 태그

ReactDOM.render(
  <>
    <p>안녕</p>
    <p>리액트!</p>
  </>,
  document.getElementById('root')
); // 축약형