React 조건문
- 렌더 안에서는 for과 if를 못씀
- for는 map
- if는 삼항 연산자
📝조건문 예시1
{this.state.result.length === 0
? null
: <div>
평균 시간: {this.state.result.reduce((a,c) => a + c)/ this.state.result.length}ms</div>
}result가 현재 빈 배열이면 아무것도 하지않고 빈배열이 아니라면 평균시간을 구한다.📝조건문 예시2 (부호연산자)
{this.state.result.length !== 0
&& <div>평균 시간: {this.state.result.reduce((a,c) => a + c)/ this.state.result.length}ms</div>
}setTimeout을 넣어 반응속도 체크
-
state를 'waiting', 'ready', 'now'로 나눔.
-
js에서 타이머 함수들
-
setTimeout(함수, 시간): 일정 시간 후 함수 실행 -
setInterval(함수, 시간): 일정 시간 간격으로 함수 반복 실행 -
clearTimeout(id): 실행되고 있는 timeout 을 중지 -
clearInterval(id): 실행되고 있는 interval 을 중지출처: https://dororongju.tistory.com/68 [웹 개발 메모장]
-
-
랜덤한 시간 불러오기.
- 🔗참고자료 링크 바로가기Math.random(): 0~1사이의 랜덤한 숫자 불러옴.- 2초에서 3초 사이로 만들기
Math.random() * (max - min)) + min - 1초는 1000
Math.floor: 정수로 만들어주는 함수
-
클래스에선 this로 표현할 것들을 그냥 적어주면 됐지만 hooks에선 ref를 이용하여 적어줌.
👉 this의 속성을 ref로 표현 -
❓ useState와 useRef의 차이
- setName을 실행하면 return부분이 다시 실행되지만
- useRef의 값들이 바뀌면 return부분이 다시 실행되지 않음
👉 불필요한 rendering은 막아야한다.
return 내부에 for과 if 쓰기
- return 내부에 if 쓰기
: 즉시 실행 함수 만들어주기
{(() => {
if (result.length === 0 ){
return null;
}
else {
return <>
<div>평균 시간: {result.reduce((a,c) => a + c)/ result.length}ms</div>
<button onClick = {onReset}>리셋</button>
</>
}
})()}- return 내부에 for문 쓰기
{(() => {
const array = [];
for(let i = 0; i < tries.length; i++) {
array.push(<Try key={ `${i+1}차 시도 : ${v.try}`} tryInfo = {v} />);
}
return array;
})()}- jsx에서 배열을 내보낼수도 있음.
