[React] JSX

• JSX 

:  A syntax extension to JavaScript (자바스크립트의 확장문법)

  JavaScript + XML/HTML

 

 

• JSX 코드

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

 

• JSX 의 역할

 : JSX 는 내부적으로 XML/HTML 코드를 JavaScript 로 변환하는 과정을 거치게 된다. 그렇기 때문에 실제로 우리가 JSX로 작성해도, 최종적으로는 JavaScript 가 나오게 되는 것이다. 여기서 JSX 코드를 JavaScript 로 변환하는 역할을 하는 것이 React 의 createElement 라는 함수인 것이다.

 

• 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')
);

 

• 결과

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


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

React.createElement() 의 결과로 아래와 같은 객체가 생성된다.

const element = {
    type: 'h1',
    props: {
    	className: 'greeting',
        children: 'Hello, world!'
    }
}

 

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

이 코드는 createElement 의 파라미터를 나타낸 것이다.

type 은 element 의 유형,  props 는 속성, children 은 element 가 포함한 자식 element 이다.

 

JSX 를 사용하면 장점들이 많기 때문에 편리하다.