JSX란? / JSX의 장점 및 사용법

JavaScript를 줄여서 JS라고 하고

JSX는 A syntax extension to JavaScript라는 의미이며

해석하면 자바스크립트의 확장 문법 이라는 뜻이다.

 

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

대입연산자 (=)이 나오고

이때 오른쪽 값을 왼쪽 변수에 대입해준다.

 

const element까지는 흔한 JavaScript 문법이지만

오른쪽의 <h1>태그는 HTML문법이다.

즉 위 코드는 JavaScript + HTML의 JSX코드이다.

이 코드의 역할 : <h1>태그로 둘러쌓인 문자열을 element라는 변수에 저장하는 것

 

 

---

 

// JSX를 사용한 코드
const element = {
	<h1 className = "greeting">
    	Hello, world!
    </h1>
}

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

* 리액트에서 JSX를 쓰는 것이 필수는 아님!

* JSX를 사용하면 쉽고 가독성이 좋은 등의 장점이 많아서 편리함

 

---

 

JSX의 장점

1. 코드가 간결해진다.

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

// JSX 사용x
React.CreateElement('div', null, `Hello, ${name}`);

 

2. 가독성 향상

- 버그를 발견하기 쉬움

 

3. Injection Attacks 방어

- 잠재적인 보안위협을 낮출 수 있다.

 

---

 

JSX 사용법

 

...XML/HTML {JavaScript 코드}...XML/HTML

XML/HTML코드를 쓰다가 JavaScript코드를 쓰고 싶을땐 {중괄호}를 써서 묶어주면 된다.

 

- JSX에서는 {} 안에 무조건 JavaScript코드가 들어간다고 보면 된다.