좋은 일인지 나쁜 일인지 알 수 없지만, 확실히 시간은 계속 변한다. 따라서 뷰를 갱신해야 한다. 뷰를 갱신하기 위해 상태를 사용할 수 있다. 상태에 currentTime이란 이름을 주고, 다음 예제 코드처럼 이 상태를 렌더링해보자.

 

예제 코드 4.1 JSX에서 상태 렌더링하기

class Clock extends React.Component {
    render() {
        return <div>{this.state.currentTime}</div>
    }
}
 
ReactDOM.render(
    <Clock/>,
    document.getElementById('content')
)

---

 

이렇게 하면 Uncaught TypeError: Cannot read property 'currentTime' of null이라는 오류메시지가 발생한다. 보통 자바스크립트 오류 메시지는 물에 빠진 사람에게 지푸라기를 주는 수준으로 거의 도움이 되지 않는다. 그렇지만 최소한 이 오류 메시지는 도움이 된다. 이 오류 메시지는 currentTime 값이 없다는 것을 의미한다. 속성과 달리 상태 객체는 부모 컴포넌트에서 설정하는 것이 아니다. 그렇다고 해서 상태를 설정하기 위해 render() 메서드 안에서 setState를 실행할 수는 없다. 그러면 setState → render → setState...로 끊임없이 반복되므로 React가 오류를 발생시킨다.