[React] JSX

JavaScript XML

React에서 HTML을 표현할 때, JSX를 사용

외관상 HTML같은 마크업 언어를 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다.

자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능.

 

HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다

Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.

 

 

• 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.
• React의 Custom Element는 <MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기
• JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식

HTML	JSX
class  ,  for  ,  onclick	className  ,  htmlFor  , onClick
<!--  -->  ,  < my-element >	{/*  */}  ,  < MyElement />
	{ js 사용 }

class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용

마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용

 

 

파스칼 표기법(Pascal Case)

연달아 오는 단어의 모든 앞글자를 대문자로 표기하는 것은 카멜 표기법과 같지만, 맨 앞에 오는 문자까지도 대문자로 표기한다.