1-1. JSX에 대해서

JSX란?

• A syntsx extension to javaScript로 자바스크립트의 확장 문법을 의미한다.
• JavaScript와 XML 또는 HTML을 합친것이다.

let dom = <div>안녕</div>;

 

JSX을 사용하는 이유

• xml 또는 HTML 코드를 내부적으로 JavaScript로 변환하는 과정을 거치게 된다. 따라서 JSX로 코드를 작성하면 JavaScript로 변환된다는 것을 의미한다.
• createElement라는 함수가 jax에서 javaScript로 변환하는 역할을 담당한다.

JAX로 작성한 코드
class Hello extends React.Component {
    reder() {
        return <div>Hello {this.props.toWhat}</div>
    }
   
ReactDOM.render{
    <Hello toWhat="World" />
    document.getElementById('root')
};

 

JavaScript로 작성한 코드
class Hello extends React.Component {
    reder() {
        return React.createElement('div', null, 'Hello ${this.props.toWhat}');
    }
   
ReactDOM.render{
    React.createElement(Hello, { toWhat: 'World'}, null),
    document.getElementById('root')
};

 

위에 두 코드를 비교해보면 JAX에서 element를 생성하는 코드를 javaScript에서는 createElement라는 함수를 이용하여 element를 생성하고 있다는 것을 알 수 있다.

 

createElement

React.createElement(
    type,          // 유형
    [props],       // 속성
    [...children]  // element가 포함한 자식
)

 

JSX의 장점

• 간결한 코드와 향상된 가독성
• Injection Attacks로 부터의 방어