Page 29 -

id: 'ember',
3((CO5 - 3))
<h1>의 HTML 표준 속성에 해당하는
frameworkName: 'Ember.js', id와 title은 그대로 렌더링한다.
title: 'A framework for creating ambitious web applications.'
}),
React.createElement(HelloWorld, {
id: 'backbone',
frameworkName은 <h1>의 HTML 표준 속성이 아니므로
frameworkName: 'Backbone.js', 별도의 처리를 하지 않는 경우에는 렌더링하지 않는다.
title: 'Backbone.js gives structure to web applications...'
}),
React.createElement(HelloWorld, {
id: 'angular',
frameworkName: 'Angular.js',
title: 'Superheroic JavaScript MVW Framework'
})
),
document.getElementById('content')
)

1장과 마찬가지로 로컬 환경에 개발 서버를 실행한 후 코드를 실행해보자. 그림 2-9는 서로 다른
<h1> 요소를 세 번 렌더링하기 위해 HelloWorld 컴포넌트 클래스를 재사용한 결과다. 각각 제목
에 서로 다른 텍스트를 표시하도록 this.props를 사용했다. 또한, 서로 다른 title과 id를 속성
으로 넘겨주어 렌더링하도록 했다. 대부분의 코드를 효과적으로 재사용했고, HelloWorld 컴포넌
트 클래스를 성공적으로 사용했다고 할 수 있다!

그림 2-9 HelloWorld 컴포넌트를 재사용해서 서로 다른 <h1> 요소 세 개를 렌더링한 결과

080

리액트 교과서(본문)최종.indd 80 2018-05-09 오전 12:32:56