section4. 4-5 return 내부에 for과 if쓰기

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;