JSX에서 js의 for문과 if문을 사용하지 못하는 것은 아니지만 코드가 지져분해져 많이 사용되진 않지만 사용법을 알려주시니 기억은 하고 있자..
if문 사용하기
if문을 사용하는 방법은 함수를 사용하는 방법이다. jsx에서 { } 를 사용하면 js문법을 사용할 수 있는데 거기에 즉시실행함수를 실행하고 해당 함수 내부에 if문을 사용하면 된다.
return(
<>
...
{(()=>{
if(result.length === 1){
return null;
}else{
return <>
<div>{result.length}</div>
</>
}
})()}
....
</>
)
for문 사용하기
for문도 if문과 동일하다. 함수안에 넣으면 사용하기 그나마 간편해진다. (함수는 즉시실행함수여야한다.)
return (
...
{
//반복문
(()=>{
const array = [];
for(let i =0; i<5; i++){
array.push(<div>안녕하신가</div>);
}
return array;
})()
}
...
)
JSX에서 배열을 반환하는 것.
jsx에서 배열을 반환해도 된다. 하지만 실무나 연습할 때 좀 처럼 사용되진 않는다고 하셨다. apple coding 강의볼 때 탭구현할 때 본거 같기도하다.
return [
<div key="apple">사과</div>
<div key="AsianPear">배</div>
<div key="banana">바나나</div>
<div key="mandarin">귤</div>
]
전체코드
import React, {useRef, useState} from "react";
import response from "./Response";
const ResponseHooks = () => {
const [state,setState] = useState('waiting');
const [message, setMessage] = useState('클릭해서 시작하세요.');
const [result, setResult] = useState([]);
const timer = useRef(null);
const startTime = useRef(0);
const onClickScreen = () => {
if(state === 'waiting'){
setState('ready');
setMessage('색이 바뀌면 클릭해주세요');
const max = 2000; //2초
const min = 500 // 0.5초
const randTime = Math.floor(Math.random() * (max - min + 1)) + min;
timer.current = setTimeout(()=>{
startTime.current = new Date().getTime();
setState('now');
setMessage('클릭해주세요!!');
},randTime);
}else if(state === 'ready'){
alert('너무 성급합니다. 다시 시작하겠습니다.');
setState('waiting');
setMessage('클릭해서 시작하세요.');
clearTimeout(timer.current);
}else if(state === 'now'){
clearTimeout(timer.current);
const endTime = new Date().getTime();
const responseTime = endTime - startTime.current;
setMessage('클릭해서 시작하세요.');
setState('waiting');
setResult((prev) => {
return [...prev, responseTime];
});
}
}
const onResetClick = () => {
setResult([]);
}
const renderAverage = () => {
return result.length === 0 ?
null:
<>
<div>평균 시간{result.reduce((a,c)=>a+c) / result.length }ms</div>
<button onClick={onResetClick}>리셋</button>
</>
}
return(
<>
<div
id="screen"
className={state}
onClick={onClickScreen}
>
{message}
</div>
{(()=>{
if(result.length === 1){
return null;
}else{
return <>
<div>{result.length}</div>
</>
}
})()}
{
//반복문
(()=>{
const array = [];
for(let i =0; i<5; i++){
array.push(<div>안녕하신가</div>);
}
return array;
})()
}
{renderAverage()}
</>
)
}
export default ResponseHooks;