section4. 4-2. setTimeout넣어 반응속도체크

반응속도체크 코딩

전체코드

import React, {Component} from "react";

class Response extends Component{
    state = {
        state:'waiting',
        message:'클릭해서 시작하세요.',
        result:[],
    }
    timer = null;
    startTime = 0;

    onClickScreen = e => {
        const {state, message, result} = this.state;
        const {target} = e;
        if(state === 'waiting'){ //기달 -> 준비
            this.setState({state:'ready', message:'색이 바뀌면 클릭해주세요'});
            const max = 2000; //2초
            const min = 500 // 0.5초
            const randTime = Math.floor(Math.random() * (max - min + 1)) + min;
            this.timer = setTimeout(()=>{
                this.setState({state:'now', message:'클릭해주세요!'});
                this.startTime = new Date().getTime();
            },randTime);
        }else if(state === 'ready'){
            //너무 성급하다 다시 시작하겠다 멘트
            alert('너무 성급합니다. 다시 시작하겠습니다.');
            this.setState({state:'waiting', message:'클릭해서 시작하세요.'});
            clearTimeout(this.timer);
        }else if(state === 'now'){
            const endTime = new Date().getTime();
            clearTimeout(this.timer);
            const responseTime = endTime - this.startTime;
            this.setState((prevState) => {
                return {result:[...prevState.result, responseTime], state:'waiting', message: '클릭해서 시작하세요.'}
            });
        }
    }

    renderAverage = () => {
        const {result} = this.state;
        return result.length === 0 ?
            null:
            <div>평균 시간{this.state.result.reduce((a,c)=>a+c) / this.state.result.length }ms</div>
    }

    render() {
        const {state, message, result} = this.state;
        return (
            <>
                <div
                    id="screen"
                    className={state}
                    onClick={this.onClickScreen}
                >
                    {message}
                </div>
                {this.renderAverage()}
                {
                    result.map(v => <div>{v}ms</div>)
                }
            </>
        );
    }
}

export default Response;

강의 보기 전에 미리 코딩해봄. 그래서 강의랑 좀 다름.

 

※ setTimeout은 call stack으로 넘어가서 실행이 되는데 콜스택으로 넘어가더라도 clearTimeout으로 취소 가능함.