React(삼항연산자)

otter·2021년 7월 10일
0

React

목록 보기
1/4
post-thumbnail

삼항 연산자

if문의 단축 형태로 쓰이는 세개의 피 연산자를 취할 수 있는 유일한 연산자


JSX 내부의 JS 표현식에서는 if문을 사용할 수 없다.

그럴 때 삼항 연산자를 사용한다.

const isTrue = num > 0;

const isItTrue = isTrue ? 'true' : 'false'

위의 식에서 만약 num이 0보다 크다면 'true'를 리턴해줄 것이고,

0보다 작은 수라면 false를 리턴해줄 것이다.

이런 형태를 띄는 것이 JSX에서 사용하는 if문과 닮은 삼항연산자이다.

var stop = false, age = 16;

age > 18 ? location.assign("continue.html") : stop = true;

이런식으로 18세 미만의 사용자라면 stop에 true 값을 주는 형태도 취할 수 있다.

if문의 단축형이라는 것이 가장 정확한 설명이겠다.

var age = 16;

var url = age > 18 ? (
    alert("OK, you can go."),
    "continue.html"
) : (
    alert("You are much too young!"),
    alert("Sorry :-("),
    "stop.html"
);

location.assign(url); // "stop.html"

위와 같이 값이 할당되는 동안 여러개의 연산도 가능하다.

0개의 댓글