JSX

JSX란?

자바스크립트의 확장 문법. ( javascript + xml/html )

//jsx
const element = <h1>hello world</h1>;

// jsx내부
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'hello world'
)

// 자바스크립트 객체가 나오게된다.
const element = {
  type:'h1',
  props:{
    className:'greeting',
    children:'hello world'
  }
}

JSX의 역할

jsx는 내부적으로 xml, html코드를 자바스크립트로 변환하는 과정을 거친다.
xml, html코드를 자바스크립트로 변환하는 코드가 React.createElement라는 함수다.
react는 내부적으로 React.createElement를 사용하게 되어있고 자바스크립트객체가 나오게 되어있다.

React.createElement의 파라미터

React.createElement(
  type, // element의 유형 
  [props]. // 속성
  [...children] // element의 자식요소
)

JSX의 장점

1. 간결한코드

2. 가독성향상 = 버그를발견하기쉬움

3. injection Attacks 방어 = 안전성확보

injection Attacks이라는 해킹방법은 문자나숫자같은 입력이아닌 코드를넣어 해킹하는방법이다.

JSX사용방법

...xml/html
{javascript}
...xml/html

const foo = <h1>hello</h1>;