JSX란?
React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 한다.
JSX로 작성된 코드는 나중에 번들링되면서 babel-loder를 통해 자바스크립트로 변환한다.
JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점있다.
1. 보기에 익숙하다(가독성이 좋다)
2. 컴파일시 오류 감지
3. HTML 사용하듯이 사용
JSX
var soo = (
<div>
<h1>안녕하세요</h1>
</div>
)
바벨로 변환하면 다음과 같다.
var soo = React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"안녕하세요"
)
)
문법
- 부모 Element
컴포넌트에 여러 Element가 있다면 부모 Element 하나로 꼭 감싸야 한다.
다음코드는 오류를 발생한다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<p>안녕하세요.</p>
<p>잘지내시죠?</p>
);
}
}
export default App;
부모 Element를 감싸주면 오류가 해결된다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<p>안녕하세요.</p>
<p>잘지내시죠?</p>
</div>
);
}
}
export default App;
- Fragment
리액트 v16이상에서는 Fragment가 생겼다.
Fragment를 사용하면 <div> 요소를 감싸지 않아도 여러 Element가 렌더링 된다.
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<p>안녕하세요.</p>
<p>잘지내시죠?</p>
</Fragment>
);
}
}
export default App;
- 자바스트립트 표현
JSX가 단순이 DOM 렌더딩 이외에 자바스크립트 표현식을 쓸 수 있으며 코드를 {} 감싸면 된다.
{text} 자바스크립트 선언이 렌더링 된다.
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const text = "안녕하세요";
return (
<Fragment>
<p>{text}</p>
<p>잘지내시죠?</p>
</Fragment>
);
}
}
export default App;
- 조건부 연산자
자바스크립트 표현식 if문를 사용할 수 없지만, 조건에 따라 렌더링 해야할때 {} 안에 연산자를 사용하면 된다.
name 값이 조미미 일 경우 <p>맞음</p> 이 렌더링 될 것이다.
import React, { Component } from 'react';
class App extends Component {
render() {
const text = "안녕하세요";
const name = "조미미";
return (
<div>
{ name === "조미미" ? <p>맞음</p> : <p>아님</p>}
<p>{text}</p>
<p>잘지내시죠?</p>
</div>
);
}
}
export default App;
특정 조건를 만족할때 만족하지 않을때 각각 다른 결과를 보여주어야 할때는 상위에 쓴 조건부 연산자를 사용하는게 맞다.
하지만 특정 조건일때만 보여주고싶다면 {name === "조미미" && <p>이력확인</p>} && 연산자로 조건부 처리하면 된다.
**- class대신 className 사용
다음과 같이 div에 class를 사용하면 경고 메세지를 표시한다. 이미 class 자바스크립트 키워드에 있기 때문이다.
Component를 선언할때 class가 사용된다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
- <div class="inText">
+ <div className="inText">
<p>잘지내시죠?</p>
</div>
);
}
}
export default App;
**- inline style 사용
리액트 DOM요소에 스타일을 적용할때 문자열로 적용할 수 없다. 대신에 자바스크립트 객체형으로 만들어서 적용해야한다.
이때 key값은 카멜표기법으로 작성되어야 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const style = {
backgroundColor: '#f1f1f1',
fontSize: '12px'
}
return (
<div style={style}>
<p>안녕하세요</p>
<p>잘지내시죠?</p>
</div>
);
}
}
export default App;
**- 닫기태그
HTML 코드를 작성할때 닫기태그를 작성하지 않는 경우가 있는데, 예로 <input> <br>등이 있다.
JSX에서는 꼭 닫기 태그를 닫아줘야한다.
<br />
<input type="search" />
**- 주석처리
JSX에서 사용되는 주석은 일반적인 주석처리와 다르다.
<div>
{/* 요소밖 주석처리 */}
<p className="greeting"
/* 요소안에서만 사용하는 주석 */
// 마지막 >가 꼭 새 줄에 있어야함
>
안녕하세요
</p>
</div>