React JSX에서 class와 for 속성 사용하기

Sep 22, 2022

React에서 class와 for 사용하기

React와 JSX에서 class와 for는 그대로 사용할 수 없다. class와 for는 Javascript와 ECMAScript의 예약어이므로 Javascript를 확장한 문법인 JSX에서 사용할 수 없기 때문이다.

class와 for대신 className과 htmlFor를 사용하면 된다.

HTML에서의 class 속성

<div className="menu"></div>

React에서의 className 속성

<div>
  <div className="menu"></div>
</div>

HTML에서의 for 속성

<label for="menu-button"></label> <input id="menu-button" />

React에서의 htmlFor 속성

<label htmlFor='menu-button'></label>
<input id='menu-button' />

Javascript에서는 주석을 /**/와 같이 달지만 JSX는 추가로 양 옆에 대괄호를 붙여준다.

<div>
  <span>1</span>
  {/*<span>2</span>*/}
  <span>3</span>
</div>

Table Of Contents