Page 27 -

),
document.getElementById('content')
)

그림 2-8 HelloWorld 클래스를 세 번 사용해서 속성과 innerHTML이 서로 다른 h1 요소 세 개를 만들었다.
div %0. ਃࣗ

h1
div 3FBDU ৃܻݢ౟ id title

HelloWorld HelloWorld HelloWorld
۪؊݂ h1
id title id title id title
id title
fra
frameworkNameameam frameworkName frameworkNamera
h1
id title
div 3FBDU ৃܻݢ౟
HelloWorld 3FBDU ৃܻݢ౟
id title frameworkName

h1 3FBDU ৃܻݢ౟
id title frameworkName
!!' 'Hello' + this.props.frameworkName+ 'world!!!' 'He

예제 코드 2.4에서 HelloWorld 컴포넌트의 구현을 살펴보자. 컴포넌트의 render() 메서드 내에서

this.props 객체에 접근하면 createElement()의 두 번째 매개변수로 전달한 객체에 접근할 수 있
다. 예를 들면 {id: 'ember'...}와 같은 객체다. 그러므로 다음 예제 코드처럼 frameworkName으로
넘긴 값에 접근할 수 있다.

예제 코드 2.4 render( ) 메서드에서 frameworkName 속성 사용하기
class HelloWorld extends React.Component {
render() {
return React.createElement(
'h1',
null,
'Hello ' + this.props.frameworkName + ' world!!!' 세 문자열 “Hello”,
) “this.props.frameworkName”,
“world!!!”를 합친다.
}
}

078

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