[jsx] jsx란?

jsx => javaScript + XML/ HTML

 : 자바스크립트 확장 문법

   자바스크립트와 html을 함께 사용할 수 있는 자바스크립트의 확장 문법

   

//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")
 );

 => 코드 간결하고 생산성과 가독성이 향상 및 Injection Attacks 방어

ReactDOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환

 

 

createElement()함수

React.createElement(
 type, 
 [props],
 [...children]
)

type: 엘리먼트의 유형. <div><span>같은 HTML 태그나 다른 리액트 컴포넌트

props: 속성

children: 현재 엘리먼트가 포함하는 자식 엘리먼트

 

JSX 사용하는 방법

 1) 중괄호를 사용하요 자바스크립트 변조 참조

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

 2) 중괄호를 이용하려 자바스크립트 함수 호출

<h1>Hello, {formatName(user)}</h1>

 3) 태그 속성에 값을 넣는 방법

// 큰따음표 사이에 문자열
const element = <div tabIndex ="0"></div>
// 중괄호 사이에 자바스크립트 코드 넣어야 함
const element = <img scr{user.acatarUrl}></img>