“A syntax extension to JavaScript.”
= “JavaScript” + “XML/HTML”
// JS = XML/HTML 가 JSX 가 됩니다.
const element = <h1>hello, world!</h1>;
JavaScript
복사
JSX 장점
1.
코드의 간결함
2.
코드의 가독성 향상
3.
Injection Attack, XSS 방어로 보안성 향상
JSX 기능
•
JSX 는 내부적으로 XML/HTML 코드를 JS 코드로 변환합니다.
•
ReactDOM 은 랜더링하기 전에 임베딩된 값을 모두 문자열로 변환합니다. 그렇기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어가지 않습니다. XSS 를 방어할 수 있습니다.
•
React 에서 JSX 를 사용하는 것은 필수는 아닙니다. 하지만 JSX 사용하는게 절대적으로 장점이 많습니다.
•
JSX 코드를 JS 코드로 변환은 React.createElement() 함수가 합니다.
// JSX 사용
const element = (
<h1 className="intro">
Hello World!
</h1>
)
// React 객체 엘리먼트 생성 사용
const element = React.createElement(
'h1', // 엘리먼트 유형으로 HTML Tag(<div>, <span>, ...) 또는 React Components 도 가능합니다.
{ className: 'intro' }, // 컴포넌트로 전달될 속성(props)이 전달됩니다.
'Hello World!' // 현재 엘리먼트가 포함하고 있는 자식 엘리먼트입니다.
)
// JavaScript Object 직접 사용
const element = {
type: 'h1',
props: {
className: 'intro',
children: 'Hello World!'
}
}
JavaScript
복사
JSX 렌더링 예시
class Intro extends React.Component {
render() {
// return React.createElement('div', null, `Hello ${this.props.message}`);
return <div>Hello {this.props.message}</div>;
}
// 만들어진 컴포넌트는 ReactDOM.render() 함수를 사용해서 실제 화면에 랜더링됩니다.
ReactDOM.render(
//React.createElement(Intro, { message: 'World!' }, null),
<Intro message="World!" />,
document.getElementById('root')
);
JavaScript
복사
JSX 에서 중괄호 사용
•
JSX 에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어갑니다.
const element = <div tabIndex="0"></div>;
const element = <img src={item.imageUrl}></img>;
JavaScript
복사
JSX 에서 children 정의
const element = (
<div>
<h1>Hi React!</h1>
<h2>React is a good UI library.</h2>
</div>
);
JavaScript
복사
