개발노트

import React ,{ useState } from 'react'; const ResponseCheck = () => { const [ color, setColor ] = useState('waiting'); const [ message, setMessage ] = useState('클릭해서 시작'); const [ result, setResult] = useState([]); // timeout; // startTime; //시작시간 // endTime; //클릭한시간 const onClickScreen = ()=>{ if( color === 'waiting'){// waiting일때 클릭을 한 경우 setColor('ready'); setMessage('초록색이되면 클릭하시면 됩니다'); tim..

Rready상태 -> (클릭) -> 게임시작 기다려 상태 -> ( 2~3초 후 ) 클릭해 상태 -> (클릭) -> 반응속도를 체크! 1. 기본 state, if 만들기 import React ,{Component} from 'react'; class ResponseCheck extends Component{ state={ color:'waiting', message:'클릭해서 시작', result:[], } onClickScreen = ()=>{ const { color, result, message } = this.state; if( color === 'waiting'){// waiting일때 클릭을 한 경우 this.setState({ color:'ready', message:'초록색이되면 클릭하세요..

render의 jsx안에서 for if못쓴다 조건문 걸때는 삼항연산자 사용 render(){ {this.state.message} {this.state.result.length !== 0 && 평균시간: {this.state.result.reduce((a,c)=>a+c) / this.state.result.length} ms } } { 조건 ? T : F } 이조건이아니면 이거 해줘 일땐, true자리에 그냥 null쓰면 된다. { 조건 && T } getAverage = () => { const { result } = this.state; return result.length !== 0 && 평균시간: {result.reduce((a,c)=>a+c) / result.length} ms } render(..

render안에 setState넣으면 둘이 계속 호출해되서 무한반복 일으키니 사용하지 말것- 부모로 받은 props를 state에 넣을 수 있다 import React , {meno} from 'react'; const TryList = memo( ({ tryInfo }) => { tryInfo.try='hi'; // (x) return( {tryInfo.try} {tryInfo.result} ) }); export default TryList; 부모로 받은 자식이 props를 바꾸면 안된다. 부모가바꿔야 함. 어쩔수없이바꿔야 할 경우 (1)props를 state에 넣어준다 import React , {useState, memo} from 'react'; const TryList = memo( ({ tr..