[3장]JSX의 이해

React를 사용하면 JSX를 사용하지 않고 개발을 할 수 도 있지만, 대부분의 개발에서는 JSX를 사용 할 것이라고 생각한다. 이번 정리에서는 JSX가 무엇인지 알아보고 어떻게 사용해야 하는지 정리를 해본다.

JSX란??

먼저 이전 포스팅에서 만들었던 hello-world 프로젝트안에 App.js를 보면 아래와 같다.

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';

    function App() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                    Edit <code>src/App.js</code> and save to reload.
                    </p>
                    <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                    >
                    Learn React
                    </a>
                </header>
            </div>
        );
    }

    export default App;

여기서 주의 깊게 봐야 할 내용은 App 함수의 리턴 내용이다. 저 부분을 React에서는 JSX라고 부른다. React로 개발을 시작하는 대부분의 개발자분들은 JSX를 사용해 개발을 진행 하게 될 것인데 이 JSX라는게 무엇일까? JSX는 단순하게 Javascript라고 생각 하면 된다. 생김새는 HTML인데 Javascript라니 조금 의아 할 수 있다.
위에서 보이는 HTML형식의 JSX는 React의 빌드 도구에 의해서 빌드 되면서 컴파일 되고 아래와 같은 형식으로 변경된다.

    function App() {
        return _react.default.createElement("div", {
            className: "App"
        }, _react.default.createElement("header", {
            className: "App-header"
        }, _react.default.createElement("img", {
            src: _logo.default,
            className: "App-logo",
            alt: "logo"
        }), _react.default.createElement("p", null, "Edit ", _react.default.createElement("code", null, "src/App.js"), " and save to reload."), _react.default.createElement("a", {
            className: "App-link",
            href: "https://reactjs.org",
            target: "_blank",
            rel: "noopener noreferrer"
        }, "Learn React")));
    }

정말 복잡하다. 우리가 HTML로 작성한 내용이 JavaScript로 변경된 것을 확인 할 수 있다. 아마 Compile을 통한 변환이 없고 위와 같은 코드로 개발을 해야 했다면… 아마 React는 사용하지 않았겠지 싶을 정도다. 이런 결과는 여기서 확인 할 수 있다.

정리 하자면 JSX는 개발자가 HTML로 표현하는 Javascript인 셈이다. 이데 대한 변환은 Compile을 거치면서 자동으로 변환된다.

JSX에 표현할 내용은 Container Element에 포함 시켜야 한다.

    return (
        <h1>Hello,</h1>
        <h2>CWH</h2>
    );

위 코드에서 h1, h2태그로 표현을 하고자 할 때, 아래와 같은 에러를 나타내게 된다.

JSX에서 Javascript Expression

JSX안에서 Javascript 표현식을 넣는 방법은 간하다.

    function App() {
        var name = 'CWH';
        return (
            <div>
                <h1>Hello,</h1>
                <h2>{name}</h2> 
            <div>
        );
    }

위 소스코드를 보게 되면 name이라는 Javascript변수를 JSX안에서 {name}을 이용해서 표현한 것을 볼 수 있다. 이 처럼 Javascript 표현에는 {}를 사용해서 표현한다. 해당 괄호 안에는 유요한 모든 Javascript 표현식을 넣을 수 있다.

JSX문 내에서 조건 처리

JSX가 Javascript니까 JSX안에서 조건문을 사용 할 수 있겠다 라고 생각 할 수 있다. 나는 그랬는데… 결론을 말하자면 JSX내에서 조건문 사용은 불가능하고, 조금은 다른 방법으로 조건 처리를 할 수 있다.

    function App() {
        var type = 'my';
        return (
            <div>
                <h1>Hello,</h1>
                {
                    type=='my' && <h2>CWH</h2>
                    ||
                    type == 'girFriend' && <h2>POS</h2>
                }
            </div>
        );
    }

위와 같이 조건 처리 가능하나 위와 같은 방법을 사용하면 코드가 잘 읽히지 않는다. 조건을 처리 해야 한다면 위와 같은 방법 보다는 조건이 필요한 부분을 Javascipt 함수로 분리 해서 만들어서 사용하는 편이 코드를 이해하기 수월하다.

    function checkName(nameType) {
        let name;
        if(nameType == 'my') {
            name = <h2>CWH</h2>;
        } else if(nameType == 'girFriend') {
            name = <h2>POS</h2>;
        }   

        return name;
    }

    function App() {
        var type = 'my';
        return (
            <div>
            <h1>Hello,</h1>
            {checkName(type)}
            </div>
        );
    }

위와 같이 바꾸어도 결과 화면에는 변함이 없다. checkName 함수 안에서도 JSX를 사용하는 것을 확인 할 수 있고, 여기서 중요한 포인트는 chekName 함수도 JSX안에 표현식으로서 처리 할 수 있다는게 중요하다.

JSX에서 속성 정의

JSX는 Javascript이기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다. 예를 들어 JSX에서 class는 className이 되고 tabindex는 tabIndex가 된다.

JSX는 주입 공격을 방지한다.

애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.