[React] JSX

JSX란?

자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼습니다. 작성한 코드는 나중에 코드가 번들링되면서 babel-loader를

사용하여 자바스크립트로 변환합니다. JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아닙니다.

ex)

var a = (
    <div>
        <h1>Awesome <b>React<b/></h1>
    </div>
)

var a = React.createElement(
    "div",
     null,
    React.createElement(
        "h1",
         null,
        "Awesome",
         React.createElement(
                "b",
                 null,
                 "React"
        )
    )
);

JSX 장점!

#보기 쉽고 익숙하다

#오류 검사

#활용도

if문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없습니다. 하지만 조건에 따라 다른 것을 렌더링해야 할 때는 JSX 밖에서 if 문을

사용하여 작업하거나 { } 안에 조건부 (삼항)연산자를 사용하면 됩니다.

(src/App.js)

import React , { Component } from 'react';

class App extends Component {
    render() {
        const text = '당신은 어썸한가요?";
        const condition = true;

        return (
            <div>
                <h1>리액트 안녕!</h1>
                <h2>{ text }</h2>
                {
                    condition ? '참' : '거짓'
                }
            </div>
        );
    }
}

export default App;

condition의 값이 true니까 “참”을 렌더링 할 것이다.

&&를 사용한 조건부 연산자

JSX에서는 null 값 외에도 false 값을 렌더링하면 아무것도 나타나지 않습니다. 따라서 이때는 삼항 연산자보다는

&&연산자가 좋습니다

{ condition ? '보여주세요' : null }

{condition && '보여주세요' }