Page 28 -

this.props 객체의 키는 createElement()의 두 번째 매개변수로 전달한 객체의 키와 같다. this.

props의 키로 id, frameworkName, title을 확인할 수 있다. React.createElement()의 두 번째 2
인자로 전달하는 키-값 쌍의 수는 제한이 없다.

덧붙여서, 이미 눈치챘겠지만 HelloWorld 컴포넌트의 모든 속성을 자식 엘리먼트인 <h1>에 넘겨 React 첫걸음
주는 것도 가능하다. 컴포넌트에 어떤 속성이 전달되는지 확실하지 않을 때 매우 유용한 방법이
다. 예를 들면 HelloWorld 컴포넌트로 인스턴스를 생성하는 개발자가 스타일 속성을 직접 입력할
수 있도록 해야 하는 경우가 있다. 따라서 <h1>에 렌더링할 HTML 속성에 제한을 두지 않는 것

이다.

예제 코드 2.5 HelloWorld 컴포넌트의 모든 속성을 <h1>으로 전달하는 경우
class HelloWorld extends React.Component {
render() {
return React.createElement(
'h1',
this.props, 모든 속성을 자식 엘리먼트에 전달한다.
'Hello ' + this.props.frameworkName + ' world!!!'
)
}
}

예제 코드 2.6(ch02/hello-js-world/js/script.js)처럼 세 가지 HelloWorld 엘리먼트를 컨테이너
<div>에 렌더링한다. 렌더링된 결과는 그림 2-9에서 확인할 수 있다.

예제 코드 2.6 엘리먼트 생성 시 속성 전달
class HelloWorld extends React.Component {
render() {
return React.createElement(
'h1',
HelloWorld 컴포넌트로 전달한 모든 속성을 createElement를
this.props, 호출할 때 <h1> 엘리먼트로 전달한다.
'Hello ' + this.props.frameworkName + ' world!!!' frameworkName 속성은
) <h1>의 텍스트로 노출한다.
}
}
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld, {

079

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