10. react 조건문

render의 jsx안에서 for if못쓴다

 

 

조건문 걸때는 삼항연산자 사용

render(){
        <>
        <div id="screen" className={this.state.color} onClick={this.onClickScreen} > 
        {this.state.message}
        </div>
         {this.state.result.length !== 0 && 
            <p>평균시간: {this.state.result.reduce((a,c)=>a+c) / this.state.result.length} ms </p>}
        </>
    }

{  조건 ? T : F  }

이조건이아니면 이거 해줘 일땐, true자리에 그냥 null쓰면 된다.

{  조건 && T  }

 

    getAverage = () => {
        const { result } = this.state;
        return result.length !== 0 && 
            <p>평균시간: {result.reduce((a,c)=>a+c) / result.length} ms </p>
    }
    render(){
        const { color, message } = this.state;
        return(
            <>
            <div id="screen" className={color} onClick={this.onClickScreen} >
            {message}
            </div>
            { this.getAverage()   }
            </>
        )
    }

복잡해질땐 이런 방법으로 밖에 함수로 만든다