336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
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 주석을 추가할 수 있다.
참조
'스터디 > ReactJs' 카테고리의 다른 글
| [1-5]컴포넌트 라이프싸이클 (0) | 2016.12.14 |
|---|---|
| [ReactJS]1-4.환경 구축 (0) | 2016.12.02 |
| ReactJs - 1.2 Hello world (0) | 2016.11.30 |
| ReactJs 나만의 강좌 목차 (0) | 2016.11.30 |
| ReactJs란 (0) | 2016.11.29 |