10. (4)jsx 에서 for, if

jsx 구문 안에서 if

    const getAverage = () => { 
        return result.length === 0 ? null :
            <><p>평균시간: {result.reduce((a,c)=>a+c) / result.length} ms </p>
            <button onClick={ onReset }>리셋</button></>
    }
    
    return ( 
          <>
          <div id="screen" className={color} onClick={onClickScreen} >
          {message}
          </div>
          { getAverage()   }
          </> 
    )

 

    return ( 
          <>
          <div id="screen" className={color} onClick={onClickScreen} >
          {message}
          </div> 
          {
            ( ()=>{
              if(result.length === 0 ){
                return null
              }else{
                return (<><p>평균시간: {result.reduce((a,c)=>a+c) / result.length} ms </p>
                <button onClick={ onReset }>리셋</button></>);
              }
            })()
          }
          {/* { getAverage()   } */}

          </> 
    )

jsx안에 {} 쓰면 javascript쓸수 있으므로

즉시실행함수()=>{} 와 같이 if 문을 써주었음

  { ()=>{} } //함수선언 -> 이렇게쓸경우Functions are not valid as a React child에러남.
  { (()=>{})() } //함수실행하자마자 즉시실행하게,

 

가독성이 높아서, 이렇게 쓰지 않는걸 추천..

 

 

 

 

 

 

jsx 구문 안에서 for

        <ul>
            { tries.map( ( v , i)=> 
            (
                <TryList key={`${i+1}`} tryInfo={v} />
            )
            )}
        </ul>

        { ( ()=>{
            const array = [];
            for(let i=0; i<tries.length; i++){
               array.push(<TryList key={`${i+1}`} tryInfo={v} />)
            }
            return array;
        } )()}

if와 마찬가지로 즉시실행 함수로 만든다음에,  jsx가담긴 배열을 리턴.

이런방식보다 함수로 만들어서 빼거나, 자식컴포넌트로 만들어야 한다.

 

 

배열안에  jsx담아서 리턴해서 쓰는방법도 있다. (key붙어줘야 됨)