시계를 시작하려면 setInterval()을 한 번 호출해야 한다. setInterval()을 호출하는 launchClock() 메서드를 생성하자. 생성자에서 launchClock()을 호출한다. 다음 예제 코드는 완성된 Clock 컴포넌트다(ch04/clock/jsx/clock.jsx).

 

예제 코드 4.3 상태를 이용한 Clock 컴포넌트 구현

class Clock extends React.Component {
                        constructor(props) {
                            super(props)
                            this.launchClock() ---- launchClock( ) 실행
                            this.state = {
                                currentTime: (new Date()).toLocaleString('en') ---- 초기 상태에 현재 시각 추가
                            }
                        }
                        launchClock() {
                            setInterval(() => {
                                console.log('Updating time...')
                                this.setState({
                                    currentTime: (new Date()).toLocaleString('en') ---- 매 초마다 현재 시각으로 상태를 갱신
                                })
                            }, 1000)
                        }
                        render() {
                            console.log('Rendering Clock...')
                            return <div>{this.state.currentTime}</div> ---- 상태 렌더링
                        }
                    }

---