[React 리액트] JSX 간단 문법

JSX

: 자바스크립트와 HTML을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법

: HTML의 태그를 그대로 사용할 수 있음

 

1) 속성을 추가하는 경우, HTML에서는 class를 사용하지만 JSX에서는 className을 사용해야함

Why? 자바스크립트에서는 객체지향의 개념으로 class라는 키워드를 사용하기 때문!

 

2) for라는 속성도 그대로 사용 불가! JSX에서는 htmlFor을 사용해야함

Why? HTML에서는 label 태그와 함께 쓰이지만 자바스크립트는 반복문에 for라는 키워드를 사용하기 때문!

 

3) eventhandler의 이름도 다름

onblur / onfocus -> onBlur / onFocus 와 같이 camelCase로 사용해야함

 

4) JSX로 HTML 태그를 작성할 때는 반드시 하나로 감싸진 태그를 이용해야함

그렇지 않다면? 아래와 같은 오류가 발생함

https://sunsetinthegarden.tistory.com/37?category=1061551 

React 리액트 에러 해결

cf / <div>로 감싸주고 싶지 않다면? <Fragment>를 활용해도 됨!

<Fragment>는 자주 사용되기 때문에 <> </> 이렇게 이름 없는 태그로 사용해도 됨.

 

5) 자바스크립트 표현식 넣기

중괄호{}를 활용하면 자바스크립트 표현식을 넣을 수 있음

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('곧 도착합니다!');
}

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

단, 중괄호 안에서 for, if 문 등의 문장은 다룰 수 없다는 점 주의!