[React] JSX란?

JSX란?

React에서 사용하는 React 전용 문법.

 

JSX : JavaScript XML

JSX는 JavaScript에 XML을 추가한 확장 문법으로, 공식적인 자바스크립트 문법은 아니다.

웹브라우저에서 읽어올 수 없는 형태이기 때문에, 브라우저에서 실행하기 전 일반 html 코드로 변환되어 출력된다.

 

기타 상세한 사항은 React 공식 문서를 참고하면 좋다.

https://ko.reactjs.org/docs/introducing-jsx.html

 

JSX 문법 예시

▽ 기존 HTML 방식

<div>
	<div class="title">제목</div>
    <button onclick="alert();">버튼</button>
</div>

▽ JSX 방식

<div>
	<div className="title">제목</div>
    <button onClick="alert();">버튼</button>
</div>

속성값이나 대소문자 정도 차이 등을 제외하고는 거의 비슷하다.

 

[ 주의점 ]

JSX는 본질적으로 HTML보다는 Javascript에 가깝기 때문에 html 속성명 대신 camelCase 프로퍼티 명명 규칙을 사용한다. 예를 들어 JSX에서 class는 className이 되고, tabindex는 tabIndex가 된다.

이 부분을 혼동하여 html 속성명을 기입하면 오류가 발생할 수 있으니 주의!

 

JSX 기본 포맷

가장 기본적인 형태의 JSX 문서.

return() 외부에는 Javascript를 입력하고, 내부에는 html을 입력한다. 자바스크립트 표현식도 사용 가능하다. function으로 정의하는 각각의 페이지도 큰 컴포넌트의 일종이다.