예제 코드 5.1(ch05/logger/jsx/content.jsx)과 5.2(ch05/logger/jsx/logger.jsx)에서 모든 이벤트를 한번에 확인할 수 있다. 여기서는 클래스처럼 코드를 재사용할 수 있다는 점을 알아두는 것으로 충분하다. Logger 믹스인은 디버깅에 유용하다. 재렌더링 시점 또는 재렌더링이 완료되는 시점의 모든 이벤트, 속성, 상태를 표시한다.

 

예제 코드 5.1 Logger 컴포넌트의 렌더링과 세 번의 갱신 실행

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.launchClock()
        this.state = {
            counter: 0,
            currentTime: (new Date()).toLocaleString()
        }
    }
    launchClock() {
        setInterval(() => {
            this.setState({
                counter: ++this.state.counter,
                currentTime: (new Date()).toLocaleString()
            })
        }, 1000)
    }
    render() {
        if (this.state.counter > 2) return
        return <Logger time="{this.state.currentTime}"></Logger>
    }
}

---