01.4 - React JSX

- 1월 28, 2019

React.js

01.4 JSX

JSX는 자바스크립트의 확장 문법이다.

    // JSX Code 를 바벨로 변경하면?
    // JSX Code 
    var a = (
        <div>JSX Code 를 바벨로 변경하면?</div>
    )

    // JSX Code 를 바벨로 변경한 형식
    var a = React.createElement(
         'div'
        ,null
        ,'JSX Code 를 바벨로 변경하면?'
    );

위의 코드를 보면 알 수 있듯이 JSX는 html 코드를 직접 입력하는 것과 같은 형식으로 볼 수 있다.

babel-loader를 사용하여 자바스크립트로 변환할 수 있다.
JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아니다.

01.4.1 JSX 장점

01.4.1.1 보기 쉽고 익숙하다

HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작성하기도 쉽다.

01.4.1.2 오류 검사

바벨이 코드를 변환하는 과정에서 JSX에 오류를 감지해낸다.

01.4.1.3 높은 활용도

// src/index.js
ReactDOM.render(<App />, document.getElementById('root'));

컴포넌트를 마치 HTML 태그 쓰듯이 사용할 수 있다.

01.4.2 JSX 문법

01.4.2.1 감싸인 요소

// 에러 코드
class App extends Component {
    render() {
        return (
            <p>
                Edit <code>src/App.js</code> and save to reload.
            </p>
        );
    }
}

// 정상 코드
class App extends Component {
    render() {
        return (
            <div className="App">
                <p>Edit <code>src/App.js</code> and save to reload.</p>
            </div>
        );
    }
}

Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있기 때문이다.

※ <코드></코드> 코드는 꼭 닫아야한다. <br>, <hr> 태그는 웹 브라우저에서 보일 때 전혀 문제가 없지만 JSX에서 닫지 않고 작성할 경우 Virtual DOM에서 트리 형태의 구조를 만들지 못하고 에러가 발생한다. <br/>, <hr/>로 꼭 닫아주도록한다.

01.4.2.2 Fragment

01.4.2.1 감싸인 요소에서 알 수 있듯 div 태그를 이용해 감싸야하는 것을 알 수 있다. 하지만 div태그가 불필요할 경우에 대해서 처리하는 방법이다.

class Table extends Component {
    render() {
        return (
            <table>
                <tr>
                    <Columns />
                </tr>
            </table>
        );
    }
}

class Columns extends Component {
    render() {
        return (
            <td>Hello</td>
            <td>World</td>
        );
    }
}

상단의 코드는 정상적으로 동작하지 않을 것이다.

<div>
    <td>Hello</td>
    <td>World</td>
</div>

div 태그를 감싼다면 정상적으로 동작은 하지만 상단처럼 div 태그에 감싸여 반환될 것이다.

<Fragment>
    <td>Hello</td>
    <td>World</td>
</Fragment>

이렇게 하면 불필요한 div를 렌더링하는 것을 생략할 수 있다.

01.4.2.3 데이터 전달

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        return (
            <div>
                <h1>안녕하세요</h1>
                <h2>{txt}</h2>
            </div>
        );
    }
}
export default App;

{}를 이용하여 자바스크립트 값을 JSX 안에서 렌더링할 수 있다.

※ ES6의 const와 let

const - 변경 불가능한 상수
let - 동적인 값을 담을 수 있는 변수

const와 let은 scope가 함수 단위가 아닌 블록 단위이다.

01.4.2.4 inline CSS

자바스크립트 객체 형식을 만들어 적용할 수 있으며, 해당 객체에서 key는 camelCase로 작성한다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        const style = { 
            backgroundColor : 'gray'
        };

        return (
            <div>
                <h1>안녕하세요</h1>
                <h2 style={style}> {txt}</h2>
            </div>
        );
    }
}

export default App;

01.4.2.5 조건부 연산자

JSX 내부에서는 if문을 사용할 수 없다. JSX 밖에서 if문을 사용하거나 조건부(삼항)연산자를 사용하면 된다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        const condition = true;
        const style = { 
            backgroundColor : 'gray'
        };
        return (
            <div>
                <h1>안녕하세요</h1>
                <h2 style={style}> {txt}</h2>
                { 
                    condition ? '참' : '거짓'
                }
            </div>
        );
    }
}

export default App;

※ && 를 사용한 조건부 렌더링
JSX에서는 null 값 외에도 false 값을 렌더링하면 아무것도 나오지 않는다. 따라서 이때는 삼항 연산자를 쓰는 대신 다음과 같이 && 연산자로 조건부 렌더링을 할 수 있다.

{ condition && '참' }

01.4.2.6 주석

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        const condition = true;
        const style = { 
            backgroundColor : 'gray'
        };
        return (
            <div>
                {/* 요소 밖의 주석 */}
                <h1 // 요소 내부 주석 
                        /* 블럭주석 */
                >안녕하세요</h1>
                <h2 style={style}> {txt}</h2>
                { condition ? '참' : '거짓' }
            </div>
        );
    }
}

export default App;

검색

KBennyCC