[React] JSX의 특징

JSX의 특징

이전 포스팅에서 JSX에 대해 잠깐 다뤄보았지만, 본격적으로 자세하게 알아보자.

모든 리액트 컴포넌트는 render메소드가 있는데 이것은 컴포넌트가 어떻게 생길지 정의해준다. 여기서 특별한 점 하나는 JSX다. 이것은 자바스크립트 코드에서 html형식을 그대로 사용할 수 있게 해준다. 그리고 React JSX는 XML같은 문법을 Native JavaScript로 변환해준다.

render메소드 안에서 어떤 뷰를 보여줄 지 JSX형태로 리턴하면 된다.

그렇다면 이제 JSX의 특징에 대해서 자세히 알아보자.

특징1. Nested Element

모든 JSX형태의 코드는 container element안에 포함시켜줘야 한다. 아래의 예시를 보자.

Example

//에러
render() {
    return (
        <h1>Hi</h1>
        <h2>I am Error</h2>
    );
}

//container element 안에 포함시켜야 한다.
render() {
    return (
        <div>
            <h1>Hi</h1>
            <h2>I am Error</h2>
        </div>
    );
}

특징2. JavaScript Expression

JSX안에서 javascript를 표현할 때는 그냥 { } 로 wrapping하면 된다. 아래의 예시를 보자.

Example

import React from 'react';

export default class App extends React.Component {
    member = "안녕하세요. 멤버 변수입니다.";

    render() {
        let local ="안녕하세요. 지역 변수입니다.";
        return (
            <div>
                <h1>Hello World!!!</h1>
                <h2>{ local }</h2>
                <h2>{ new Date().toString() }</h2>
                <h2>{ this.member }</h2>
            </div>

        );
    }
}

Example 실행결과

• (줄 11) : { local } 부분에 7번 줄에서 정의했던 local지역 변수 값이 출력된다.
• (줄 12) : new Date().toString()표현식의 값, 즉 현재 시각이 출력된다.
• (줄 13) : 멤버 변수를 출력할 때는 반드시 this를 붙여주어야 한다. { this.member }부분에 4번 줄에서 정의했던 member멤버 변수 값이 출력된다.

특징3. Inline Style

JSX안에서 style을 설정할 때는 string형식을 사용하지 않고 key가 camelCase인 객체가 사용된다. (ex. background-color (x), backgroundColor (o)) 아래의 예제를 보자.

Example

render() {
    let myStyle = {
        color: 'yellow',
        backgroundColor: 'black'
    };

    return (
        <div style = { myStyle }>Hello world!!</div>
    );
}

특징4. comments

jsx안에서 주석을 작성할 때는 {/* ...*/} 형식으로 작성해야 한다. 주의할 점은 이 역시 container element안에 주석이 작성되어야 한다는 것이다. 아래의 예시를 보자.

render() {
    return (
        <div>
            Hello world!! {/*this is comment*/}
        </div>
    );
}