[ReactJs]JSX란?

JSX란?

Javascript xml의 약자이다. ReactJS를 사용하기위해서는 필수는 아니지만 JSX를 사용을 추천한다.

JSX 이점

- xml에 익숙한 사람이라면  쉽게 JSX를 받아 들일 수 있다.

- JavaScript의 가독성을 높일 수 있다.

- 익숙한 마크업을 사용한다.

JSX 예제

JSX를 사용하지 않을 경우  React.createElement('div', {className:”testDivider"}, “test text", React.createElement('hr') ); JSX를 사용할 경우 <div className=“testDivider”>test text</div>

JSX 사용방법 및 특징

 

아래와 같은 Html페이지를 출력하고 싶은 경우

<div className=“testDivider”>     test text </div>

React 컴포넌트를 활용하여 아래와 같이 표현할 수 있다. 

var Divider = React.createClass({ render: function () {     return (         <div className=“testDivider”>             test text         </div>     );} });

만약 div 태그안에 'test text’ 라는 문자열 대신 값을 동적으로 넣고 싶다면?

아래와 같이 중괄호{..}를 이용하여 동적인 값을 렌더링 할 수 있다.

var testText = “ssS”; var Divider = React.createClass({ render: function () {     return (         <div className=“testDivider”>             {testText}         </div>     );} });

함수를 이용하여 동적인 값을 렌더링 할 수 있다.

var testText = “ssS”; function testTextFunction(){     return testText; } var Divider = React.createClass({ render: function () {     return (         <div className=“testDivider”>             {testTextFunction()}         </div>     );} });

JSX와  Html의 차이점

1.javascript를 활용하여 동적인 값을 로드할 수 있다.

2.조건문을 바로 작성할 수 있다.

3.특별한 속성값이 있다.

4.이벤트  —>추후 예제 첨부 예정

5.javascript 주석을 추가할 수 있다.

참조

https://facebook.github.io/react/docs/introducing-jsx.html

http://edeline90.blogspot.kr/2016/10/react-jsx.html