Page 24 -

두 번째 경우로, 표준 HTML 속성명과 일치하지 않는다면 속성명이 표준 속성이 아닌 것이다.
4
이 때는 HTML에 렌더링하지 않는다. 그렇지만 이 값은 this.props 객체에서 this.props. 2
PROPERTY_NAME 같은 방식으로 접근할 수 있다. render() 메서드에서 입력하여 렌더링하거나 코
드에서 활용할 수 있다. 이 방법을 이용하면 같은 클래스의 서로 다른 인스턴스에 각각 다른 데이 React 첫걸음
터를 넘겨줄 수 있다. 이렇게 컴포넌트를 재사용할 수 있는데, 엘리먼트마다 다른 속성을 제공해
5 6 7 8
서 서로 다르게 렌더링하도록 프로그래밍 방식으로 변경할 수 있기 때문이다.

Note Object.freeze( )와 Object.isFrozen( )
5
내부적으로 React는 ES5 표준인 Object.freeze() 를 사용하여 this.props 객체를 불변 객체로 만든다. 객체
6
에 Object.freeze()가 적용되었는지 확인하려면 Object.isFrozen() 메서드를 사용할 수 있다. 예를 들면 다
음 문장을 실행했을 때 true를 확인할 수 있을지 생각해보자.

class HelloWorld extends React.Component {
render() {
console.log(Object.isFrozen(this.props))
return React.createElement('div', null, h1, h1)
}
}
7 8
이에 대해 더 자세히 알고 싶다면 React의 변경 사항 이나 React의 깃허브 저장소 를 살펴보는 것을 추천한다.

속성의 기능을 활용해서 속성 값에 따라 렌더링하는 엘리먼트를 아예 다른 모습으로 바꿀 수도 있
다. 예를 들면 다음 예제처럼 this.props.heading이 true이면 “Hello”를 <h1>으로 렌더링하고,
false이면 문단으로 렌더링할 수 있다.

render() {
if (this.props.heading) return <h1>Hello</h1>
else return <p>Hello</p>
}

4 역주 React 버전 16부터는 표준이 아닌 HTML 속성도 렌더링하도록 변경되었다. 잘못된 속성을 입력하는 경우에는 여전히 경고 문구를
노출하지만, 커스텀 속성을 입력하면 실제 DOM에 렌더링하지 않던 것을 렌더링하도록 변경하였다.
•https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
•https://github.com/facebook/react/issues/140
5 Mozilla Developer Network, Object.freeze(), http://mng.bz/p6Nr.
6 Mozilla Developer Network, Object.isFrozen(), http://mng.bz/0P75.
7 GitHub, 2016-04-07-react-v15, http://mng.bz/j6c3.
8 GitHub, ‘freeze’로 검색한 결과, http://mng.bz/2l0Z.

075

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