[ React.js ] 체크박스, 체크 이벤트, 타이머, 스톱워치 응용 가능, 예제

 

안녕하세요 상훈입니다.

React로 체크박스를 체크하면 타이머가 돌아가고, 체크박스를 해제하면 타이머가 멈추는 

체크박스를 이용한 스톱워치를 구현하려고합니다.

<div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor(props){
                super(props)
                this.state = {
                    seconds : 0
                }
                this.handleChange = this.handleChange.bind(this)

            }

            handleChange (event) {
                if(event.target.checked){
                    this.timerId = setInterval( () => {
                        this.setState({
                            seconds: this.state.seconds+1
                        })
                    }, 1000)
                }else{
                    clearInterval(this.timerId)
                }
            }

            render () {
                return (
                    <div>
                        <input type="checkbox" onChange={this.handleChange}/>   
                        <span>타이머활성화</span>
                        <h1>Timer : {this.state.seconds}</h1> 
                    </div>
                )
                
            }
            
            
        }
    
        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    
    </script>

 

이전까지는 1가지의 기능만 구현을 했었는데,

이번건 2가지의 기능(체크박스 -> 이벤트 -> setInterval())를 사용하였기 때문에 헷갈릴 수 있다.