[React] 조건문, 삼항 연산자

리액트에서 조건문을 사용할 때 주로 삼항 연산자를 사용해서 처리합니다.

삼항연산자란 
x ? y : z  

위의 모양을 가지며 x는 조건 y는 참일 때 실행되는 코드, z는 거짓일 때 실행되는 코드입니다.
ex) 10 > 3 ? a = 10 : a = 5    결과값 : a === 10

renderAverage = () => {
    const { result } = this.state;
    return result.length === 0 ? null : (
      <div>
        평균 시간: {result.reduce((a, c) => a + c) / result.length}
        ms
      </div>
    );
  };

  render() {
    const { state, message } = this.state;
    return (
      <>
        <div id="screen" className={state} onClick={this.onClickScreen}>
          {message}
        </div>
        {this.renderAverage()}
      </>
    );
  }
}

위의 코드에서 18번째 줄에 renderAverage()를 호출합니다.
여기서 1번째줄의 renderAverage는 result.length === 0의 결과에 따라 다음을 return합니다.
true면 null
false면 <div> ... </div>

해당 조건에 따라 render에 return되는 결과값이 달라지게 됩니다.

 

 

해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.