[React.JS] JSX

JSX

---

React.JS는 일반적인 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 구성하게 됩니다. 아래의 코드를 JSX라고 합니다.

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

JSX는 JavaScript의 확장 구문으로 JavaScript의 모든 기능을 제공합니다. 위의 element 변수를 보면 HTML 태그를 정의하는데, 따옴표를 사용하지 않는 것을 볼 수 있습니다.

JSX의 사용은 React.JS에서 필수는 아닙니다. 하지만 JSX를 사용하는 것이 어플리케이션의 속도와, 코드 작성에서 더 쉽고 빠르게 개발 할 수 있게 해줍니다. 

JSX Tag 안에 JavaScript 사용하기

JSX 안에 JavaScript를 사용하려면 중괄호{} 를 사용하면 됩니다. 

function square(number) {
    return number * number;
}

let number = 2;

const element = (
    <h1>
        {number} square is {square(number)}!
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

CodePen으로 예제 확인하기

JSX에서 JavaScript 사용하기

위에서 말씀 드렸던 것 처럼, JSX는 JavaScript의 확장 구문이기 때문에 JavaScript의 모든 문법을 지원합니다.

function getSquare(number) {
    if (number == 0) {
        return <h1>This number is 0</h1>
    } else {
        return <h1>{number} square is {square(number)}!</h1>
    }
}

JSX에서 Attribute

string 형태의 attribute는 기존과 동일한 방식으로 아래와 같이 표현할 수 있습니다.

const element = <div data-test="TEST"></div>;

JavaScript 형태의 attribute는 따옴표 없이 중괄호 {}로 아래와 같이 사용하면 됩니다. 따옴표를 사용하게 되면 JavaScript가 아닌 string으로 간주됩니다.

const element = <div data-test={number}></div>;

JSX에서 Child

만약 JSX의 tag의 자식 tag가 없다면 기존의 HTML과 동일하게 />로 닫아 주면 됩니다.

const element = <img scr={url}>;

또한 JSX의 tag는 하나의 container element 안에 포함시켜야 합니다.

const element1 = (
    <div>
        <h1>First Child</h1>
        <h1>Second Child</h1>
    </div>
);

const element2 = ( // 에러!!!
    <h1>First Child</h1>
    <h1>Second Child</h1>
);

JSX를 객체로 표현하기

Babel은 JSX를 컴파일 할 때 React.createElement()를 호출합니다. 아래의 두 코드는 동일한 결과를 가져옵니다.

(JSX tag에서 className은 HTML tag의 class를 뜻합니다. JSX는 camelCase로 프로퍼티의 이름을 짓습니다)

const element = (
    <h1 className="test">
        Hello, world!
    </h1>
);

const element = React.createElement(
    'h1',
   {className: 'test'},
    'Hello, world!'
);