Page 26 -

Note 앞서 주석으로 언급한 것처럼 React 버전 16부터는 표준이 아닌 HTML 속성도 렌더링하도록 변경되었
다. 변경된 버전으로 예제 코드를 실행해보면 렌더링된 HTML에서는 속성명을 모두 소문자로 바꾼 frameworkname 2
을 확인할 수 있다. 또한, 콘솔을 열어보면 DOM 요소에 표준이 아닌 속성을 적용하려면 소문자로만 작성하라는 안내
와 함께, 부모 컴포넌트에 작성해야 하는 속성을 실수로 작성했다면 제거하라는 친절한 경고도 확인할 수 있다. React 첫걸음

<h1>을 구현하기 전에 HelloWorld 클래스의 속성을 전달해야 한다. 어떻게 해야 할까? <div> 컨
테이너 내부에 HelloWorld 엘리먼트를 생성하는 시점에 createElement()의 두 번째 인자로 객
체 리터럴로 속성을 작성하여 넘겨준다.

ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld, {
id: 'ember',
frameworkName: 'Ember.js',
title: 'A framework for creating ambitious web applications.'}),
React.createElement(HelloWorld, {
id: 'backbone',
frameworkName: 'Backbone.js',
title: 'Backbone.js gives structure to web applications...'}),
React.createElement(HelloWorld, {
id: 'angular',
frameworkName: 'Angular.js',
title: 'Superheroic JavaScript MVW Framework'})

077

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