![thumbnail](/static/291be110669c0477b19a868195bccaa5/ae3ee/altumcode-XMFZqrGyV-Q-unsplash.jpg)
React에서 class와 for 사용하기
React와 JSX에서 class와 for는 그대로 사용할 수 없다. class와 for는 Javascript와 ECMAScript의 예약어이므로 Javascript를 확장한 문법인 JSX에서 사용할 수 없기 때문이다.
class와 for대신 className
과 htmlFor
를 사용하면 된다.
className
HTML에서의 class
속성
<div className="menu"></div>
React에서의 className
속성
<div>
<div className="menu"></div>
</div>
htmlFor
HTML에서의 for
속성
<label for="menu-button"></label> <input id="menu-button" />
React에서의 htmlFor
속성
<label htmlFor='menu-button'></label>
<input id='menu-button' />
JSX 주석 다는 법
Javascript에서는 주석을 /**/와 같이 달지만 JSX는 추가로 양 옆에 대괄호를 붙여준다.
<div>
<span>1</span>
{/*<span>2</span>*/}
<span>3</span>
</div>
Table Of Contents