JSX

---

A syntax extension to JavaScript

JSX 는 JavaScript와 XML, HTML을 합친 것으로 JavaScript의 확장 문법입니다.

const element = <h1>Hello, world!</h1>;
// <h1\> 태그로 둘러싸인 문자열을 element라는 변수에 저장합니다.

내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치는 것이기에 최종적으로는 JavaScript 코드로 볼 수 있습니다.

JSX 코드를 JavaScript 코드로 변환하는 역할을 하는 함수가 React의 createElement 입니다.

createElement 함수 파라미터

React.createElement(
	type,          // Element의 유형(태그, React의 컴포넌트)
  	[props],       // props(속성)
  	[...children]  // 현재 Element가 포함하고 있는 자식 Element
)

JSX 코드와 JavaScript 코드의 차이

---

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(
	'h1',
    { className: 'greeting' },
  	'Hello, world!'
)

React 는 이런 식으로 JSX 코드를 모두 createElement함수를 사용하는 코드로 변환합니다. 그렇기 때문에 React 에서 JSX를 사용하는 것이 필수는 아닙니다.

JSX 코드의 장점

---

1. 코드가 간결해진다.

JSX를 사용한 코드

<div>Hello, {name}</div>
// HTML의 div 태그를 사용해서 name이라는 변수가 들어간 인사말이다.

JSX를 사용하지 않은 코드

React.createElement('div', null, 'Hello, ${name}');
// React의 createElement함수가 동일한 작업을 수행한다.

2. 가독성이 향상된다.
   JSX를 사용한 코드가 그렇지 않은 코드에 비해 의미가 훨씬 빠르게 와닿습니다. 가독성이 높을수록 코드상에 존재하는 버그 또한 쉽게 발견할 수 있습니다.

3. Injection Attacks를 방어할 수 있다.
   Injection Attacks은 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법입니다.

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전합니다.
const element = <h1>{title}</h1>

React DOM은 렌더링하기 전에 인베딩된 값을 모두 문자열로 변환합니다. 그렇기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없습니다.

JSX 코드 사용법

---

기본적으로 JavaScript 문법을 확장시킨 것이기 때문에 모든 JavaScript 문법을 지원합니다. 여기에 추가로 XML과 HTML을 섞어서 사용하면 됩니다.

XML과 HTML 코드를 사용하닥 중간에 JavaScript 코드를 사용하고 싶다면 중괄호를 사용합니다.

const name = 'Ellie'
const element = <h1>안녕, {name}</h1>;

ReactDOM.render(
	element,
	document.getElementById('root')
);

JSX 코드에서 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다고 생각해도 됩니다.

태그의 속성값에 사용하기

만약 HTML 태그 중간이 아닌, 태그의 속성에 값을 넣고 싶을 때는 어떻게 하면 될까요?

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>
}

// 큰따옴표 사이에 문자열 넣기
const element = <div tabIndex="0"></div>;

// 중괄호 사이에 자바스크립트 코드를 넣기
const element = <img src={user.avataUrl}></img>;

자식(children)에 사용하기

const element = (
	<div>
		<h1>안녕하세요</h1>
		<h2>반갑습니다</h2>
	</div>
);