[React] JSX 문법(1) - 호환되지 않는 문법

호환되지 않는 문법

- 이미 같은 이름으로 사용되고 있는 다른 문법이라 html 문법을 수정

 

---

 

[ class ]

=> 기존 html

<p class="hello">안녕!</p>

=> JSX html

<p className="hello">안녕!</p>

 

---

 

[ for ]

=> 기존 html

<form>
	<label for="name">이름</label>
<form>

=> JSX html

<form>
	<label htmlFor="name">이름</label>
<form>

 

 

---

 

[ 슬래쉬 필수 & 대문자 ]

- input처럼 태그 하나에서 열고 닫아야하는 코드

- 카멜 케이스 작성 : 이벤트 핸들러 두번째 글자 대문자 작성

 

=> 기존 html : / 생략 가능 & 이벤트 핸들러 두번째 글자도 소문자 작성

<form>
	<input id="name" type="text" onfocus="">
<form>

=> JSX html : / 생략 안됨 & 이벤트 핸들러 두번째 글자 대문자 작성

<form>
	<input id="name" type="text" onFocus="" />
<form>