[React] JSX 문법

자바스크립트 확장 문법이다

 

사용 시 주의점

• 속성명은 카멜케이스(Camel Case)로 적어야 한다. ex) onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 단, 예외적으로 비표준 속성(data-* 속성)은 카멜케이스가 아니라 HTML 문법 그대로 작성해야 한다.

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <button onClick= ... >클릭!</button>
);

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    상태 변경: 
    <button className="btn" data-status="대기중">대기중</button>
    <button className="btn" data-status="진행중">진행중</button>
    <button className="btn" data-status="완료">완료</button>
  </div>
);

 

• 자바스크립트 예약어와 같은 속성명으로 사용이 불가능하다 ex) for, class x -> htmlFor, className in JSX

React 공식문서 - 어트리뷰트차이

DOM 엘리먼트 – React

import ReactDOM from 'react-dom';

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

 

• 반드시 하나의 요소로 묶기 - Fragement or 빈 태그(<></>) (빈 태그를 더 많이 사용함)

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <> // 혹은 <Fragement> </>
    <p>안녕</p>
    <p>리액트!</p>
  </>
);

• 자바스크립트 표현식을 넣을 땐 중괄호{} 사용

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png'

function handleClick(e) {
  alert('곧 도착합니다!');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>{product + ' ' + model} 주문하기</h1>
    <img src={imageUrl} alt="제품 사진" />
    <button onClick={handleClick}>확인</button>
  </>
);