[React] Ternary operators

Ternary operator

우리말로 하면 삼항 연산자라고 불리고 말 그대로 세개의 피연산자를 대상으로 합니다.

간단하게 if ... else 문을 살펴보겠습니다.

const name = 'Bob';
if (name == 'Bob') {
    console.log('Hello, Bob');
} else {
    console.log('Hello, Friend');
};

위 코드는 다음과 같이 작동합니다

먼저 이름 변수를 선언하고 "Bob" 문자열로 설정합니다.
다음으로 if 문을 사용하여 이름 변수의 값이 "Bob"인지 확인합니다. 만약 그렇다면 console.log에서 "Bob"이라는 단어를 출력합니다.
그렇지 않으면 이름 변수의 값이 "Bob"이 아닌 경우 다른 블록은 콘솔에서 "Hello, Friend"라는 단어를 실행하고 출력합니다.

 

위와 같은 작업을 좀더 효과적으로 간단하게 표현하는것이 삼항연산자(Ternary operator)입니다.

삼항 연산자는 두개의 고유문자를 사용하는데 그것은 ? 과 : 입니다. 그리고 문법은 다음과 같습니다.

comparison ? true : false // 비교조건 ? 참일경우 : 거짓일경우

물음표(?) 왼쪽에 비교조건을 넣고 그다음으로 참일경우 값과 거짓일 경우의 값을 콜론(:)으로 구분합니다.

 

이것을 사용하여 위의 예제를 바꾸면 다음과 같습니다:

const name = 'Bob';
name == 'Bob' ? console.log('Hello, Bob') : console.log('Hello, Friend');

삼항연산자(Ternary operator)를 사용함으로써 더욱 간단해졌습니다.

 

실제 사용하는 방법을 확인 해 보겠습니다.

 

Using ternary expressions in JSX

이제 JSX안에서 삼항연산자(Ternary operator)를 사용하는 방법을 예제를 통해 확인 해 보겠습니다.

HTML element 안에서 사용할 경우는 {} 를 사용하여 그 안에 작성합니다.

function Example() {
    return (
        <div className="heading">
            <h1>{Math.random() >= 0.5 ? "Over 0.5" : "Under 0.5"}</h1>
        </div>
    );
};