JSX란?

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

JSX(JavaScript Xml)이란?

→ 자바스크립트의 문법을 확장시킨 것, JavaScript + XML / HTML 이다.

ex) JSX 코드

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

 

JSX의 역할

JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 된다.

JSX → JavaScript로 변환을 도와주는 함수인 React.createElement가 내장되어 있음.

// JSX를 사용한 코드
class Hello extends React.Component {
	render() {
		return <div>Hello {this.props.toWhat}</div>;
	}
}

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

// JSX를 사용하지 않은 코드
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를 사용한 코드
const element = (
	<h1 className="greeting">
		Hello, world!
	</h1>
)

// JSX를 사용하지 않은 코드
const element = React.createElement(
	'h1',
	{ className: 'greeting' },
	'Hello, world'!
)

 

JSX를 사용하지 않아도 JavaScript 자체로 createElement를 구현해서 사용할 수 있음.

JSX를 사용하면 자동으로 createElement가 내장되어 있어 React element를 생성해준다.

 

JSX 장점

1. 간결한 코드

// JSX 사용합
<div>Hello, {name}</div>

// JSX 사용 안함
React.createElement('div', null, 'Hello, ${name}');

2. 가독성 향상

3. 잠재적인 보안 위험 예방 (ex. XSS)

JSX 사용법

{} 중괄호를 사용해서 속성에 JavaScript 표현식을 삽입할 수 있다.

const element = <img src={user.avatarUrl}></img>;

속성에는 따옴표를 이용해서 문자열 리터럴을 정의할 수 있다.

const element = <a href="https://www.reactjs.org"> link </a>;