What is JSX

<aside> ℹ️ JSX is used in React to describe

→ what the User interface should look like

</aside>

JavaScript 확장한 문법
템플릿 언어가 아닌 JS의 모든 기능을 포함하고 있다.
JSX는 React Element를 생성한다.
리액트에서는 렌더링 로직이 UI 로직과 결부되어있다는 것을 포용한다.
- 이벤트가 처리 방식, 시간에 따라 상태 변화에 따라 display가 달라진다.
→ 리액트는 마크업과 로직을 분리 X

⇒ 컴포넌트를 통해서 느슨한 결합을 유도한다.

JSX는 표현식(Expressions)이다.

컴파일이 끝나면, JSX 표현식이 정규 JS 함수 호출이 된다.

→ JS 객체로 인식된다
JSX는 if 혹은 for 구문에서 사용되며 변수가 선언된다.

JSX는 주입 공격을 방지한다.

JSXS에 사용자 입력을 삽입하는 것은 안전하다.

→ 모든 값을 렌더링하기 전에 이스케이프한다.

⇒ XSS 공격을 방지할 수 있다.

JSX 는 객체를 표현한다.

Babel은 JSX를 React.createElement() 로 호출하여 컴파일한다.
- to be precise, in all files where used JSX needed to import React in the past
  
  → because JSX is just syntactic sugar
  
  ⇒ under the hood, is has actually transformed two methods called on this React Object. which is why needed to import react in the past.
when use JSX, it’s near this method which is called
- this is hard to read and cumbersome than using JSX
```
return React.createElement('div', {}, 
		   React.createElement('h2', {}, 'This is Title')
		   React.createElement(CARD/* custom compoennt */, { items } )		
	)
```
- createElement takes three arguments
  1. element which should be created
    1. which is built in html
  2. object configures the element
    1. which sets all the attributes
  3. content
    1. between the opening and closing div tags
⇒ result below
```
return (
	<div>
		<h2>This is Title<h2>
		<Card>{item}</Caad>
	</div>
)
```