이제 JSX가 변수에 담는 동적 데이터를 사용해서 HelloWorld 클래스를 JSX로 다시 작성할 수 있다(ch03/hello-world-class-jsx).

 

예제 코드 3.4 JSX에서 변수 출력하기

let helloWorldReactElement = <h1>Hello world!</h1>
class HelloWorld extends React.Component {
    render() {
        return <div>
            {helloWorldReactElement}
            {helloWorldReactElement}
        </div>
    }
}
ReactDOM.render(
    <HelloWorld/>,
    document.getElementById('content')
)

---

 

이어서 JSX에서 속성을 사용하는 방법에 대해 논의해보자.