Javascript / JSX란?

JSX란?

얼핏보면 HTML과 비슷한 형태의 자바스크립트 문법이다. REACT에서 사용하는 문법

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>안녕하세요!</h1>, document.getElementById('root'));

JSX 특징

HTML과 다른 속성명

  1. 속성은 camelCase로 작성할 것

JSX 문법에서 여러 단어가 조합된 속성들을 정의할 땐 반드시 카멜 케이스(Camel Case)로 작성해야 한다.

예) onclick, onblur, onfocus, tabindex

 -> onClick, onBlur, onFocus, tabIndex 

import ReactDOM from 'react-dom';

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

  2. 자바스크립트 예약어와 같은 속성명은 변경해서 사용

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

예1) for -> htmlFor

예2) 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 문법을 활용할 때는 반드시 하나의 요소로 감싸주어야 함

import ReactDOM from 'react-dom';

ReactDOM.render(
  <div> // div로 묶어준다
    <p>안녕</p>
    <p>리액트!</p>
  </div>,
  document.getElementById('root')
);

아래 코드처럼 빈 태그로 감싸는 단축 문법으로 활용 가능함

import ReactDOM from 'react-dom';

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

자바스크립트 표현식 넣기

JSX 문법에서 중괄호({})를 활용하여 자바스크립트 표현식 사용 가능

import ReactDOM from 'react-dom';

const product = '맥북';

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