모든 속성을 전달해야 한다면, 개별 속성을 따로 전달하지 말자. JSX에서는 이에 대한 해결책으로 생략 부호(...)처럼 생긴 펼침 연산자를 사용할 수 있다. 다음 예제 코드 3.5에서 살펴보자(ch03/jsx/hello-js-world-jsx).

 

예제 코드 3.5 속성 다루기

class HelloWorld extends React.Component {
    render() {
        return <h1 {...this.props}>Hello {this.props.frameworkName} world!!!</h1>
    }
}
 
ReactDOM.render(
    <div>
        <HelloWorld
            id='ember'
            frameworkName='Ember.js'
            title='A framework for creating ambitious web applications.'/>,
        <HelloWorld
            id='backbone'
            frameworkName='Backbone.js'
            title='Backbone.js gives structure to web applications...'/>
        <HelloWorld
            id='angular'
            frameworkName='Angular.js'
            title='Superheroic JavaScript MVW Framework'/>
    </div>,
    document.getElementById('content')
)

---