JSX

A syntax extension to JavaScript
JavaScript + XML/HTML

JSX code

const element = <h1>Hello, world</h1>

JSX code > JS code

React.createElemtnt(
		type, /// 타입
		[props], /// 속성
		[...children]  /// 현재 element 가 포함된 자식 element
)

JSX를 사용한 코드1

class Hello extends React.Component {
			render() {
					return <div>Hello {this.props.toWhat}</div>
			}
}

ReactDOM.render(
			<Hello toWhat='World' />,
			document.getElementById('root')
)

JSX를 사용하지 않은 코드1

class Hello extends React.Component {
	render() {
		return React.createElement('div', null, `Hello ${this.props.toWhat}`);
	}
}

ReactDOM.render(
		React.createElement(Hello, {toWhat: 'World'}, null),
		document.getElementById('root')
)

JSX를 사용한 코드 2

const element = (
	<h1 className='greeting'>
			Hello, World!
	<h1> 
)

JSX를 사용하지 않은 코드 2

const element = React.createElement(
		'hi',
		{className: 'greeting'},
		'Hello, world!'
)

React.createElemwnt( )의 결과로 아래와 같은 객체가 생성 됨

const element = {
		type: 'h1',
		props: {
			className: 'greeting',
			children: 'Hello, world!'
		}
}

JSX의 장점 및 사용법

장점

  1. 간결한 코드 ```JSX
Hello, {name}

```JS
React.createElement(*type* 'div', *props* null, *children*`Hello, ${name}`)

  1. 가독성 향상

  2. Injection Attacks 방어 ```JSX const title = response.potentiallyMaliciousInput; // 타이틀에 무슨짓을 할지 모름

// 안전한 JSX const element = <h1>{title}</h1> ```

사용법

  1. JS code + XML/HTML
  2. •••XML/HTML {JS code} •••XML/HTML