React Basic - 17 . React 반응 속도 체크

반응속도를 체크하는 코드

import React, { Component } from 'react';

class ResponseCheck extends Component{
	state = {
			state : 'waiting',
			message : '클릭해서 시작하세요',
			result : [],
	};

	timeout;
	startTime;
	endTime;

	onClickScreen = () =>{
		const {state, message, result} = this.state;
		if(state=='waiting'){
			this.setState({
				state : 'ready',
				message: '초록색이 되면 클릭하세요',
			});
			this.timeout = setTimeout(()=>{
				this.setState({
					state: 'now',
					message: '지금 클릭하세요'
				});
				this.startTime = new Date();
			}, Math.floor(Math.random() * 1000) + 2000) // 2~3초 랜덤;
		}
		if(state == 'ready'){
			this.setState({
				state: 'waiting',
				message: '너무 성급하시네요 초록색일 때 클릭하세요',
			});
			clearTimeout(this.timeout);
		}

		if(state=='now'){
			this.endTime = new Date();
			this.setState((prevState)=>{
				return{
					state: 'waiting',
					message: '클릭해서 시작하세요',
					result: [...prevState.result, this.endTime - this.startTime],
				}
			});
			console.log(this.endTime - this.startTime);
		}
	}

	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} = this.state;
		return(
			<>
				<div id="screen" className={state} onClick={this.onClickScreen}>
					{message}
				</div>
				{this.renderAverage()}
			</>
		);
	}
}

export default ResponseCheck;

class 방식으로 구현했지만 hooks로 변경해본다.

import React, {useState} from 'react';

let timeout;
let startTime;
let endTime;

const ResponseCheck = ()=>{
	const [state, setState] = useState('waiting');
	const [message, setMessage] = useState('클릭해서 시작하세요');
	const [result, setResult] = useState([]);


	const onClickScreen = () =>{
		if(state=='waiting'){

			setState('ready');
			setMessage('초록색이 되면 클릭하세요');

			timeout = setTimeout(()=>{
				setState('now');
				setMessage('지금 클릭하세요')
				startTime = new Date();
			}, Math.floor(Math.random() * 1000) + 2000) // 2~3초 랜덤;
		}else if(state == 'ready'){
			setState('waiting');
			setMessage('너무 성급하시네요. 초록색일 때 클릭하세요');
			clearTimeout(timeout);
		}else if(state=='now'){
			
			endTime = new Date();
			
			setState('waiting');
			setMessage('클릭해서 시작하세요');
			setResult((prevState)=>{
				return [...prevState, endTime - startTime];
			})
			console.log(endTime - startTime);
		}
	}

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


	return(
		<>
			<div id="screen" className={state} onClick={onClickScreen}>
				{message}
			</div>
			{renderAverage()}
		</>
	);
}

export default ResponseCheck;

위와 같이 변경하였다.

리액트 소감

리액트의 기초 부분을 제로초님의 무료 강의를 보면서 구현해보았다. 마지막에 hooks는 강의를 보지 않고 직접 해보았다. 구동이 잘 되니 기쁘다.

지금 입사한 곳에서는 react를 쓰지 않기 때문에 아마 한동안 일에 집중하면 리액트를 까먹을 거 같기는 한데, 틈틈이 집에서 토이 프로젝트를 하든 블로그를 하든 공부해야할 거 같다.

굳이 프론트엔드 개발자로 나아가지 않는다고 해도 알아두면 나쁠 게 없어보인다. 뭐.. 일단은 일을 해보면서 필요한 스킬에 집중하는 게 더 나아보인다.

자료구조나 알고리즘 공부도 틈틈이 하고..