리액트 교과서: 3.2.6 JSX의 if/else 처리

이런 엘리먼트를 <div>로 감쌌다고 생각해보자. 이 경우에는 일반적인 자바스크립트로 작성하려면 변수를 추가하는 방법, 함수 표현식을 사용하는 방법, 삼항 연산자를 사용하는 방법을 생각해볼 수 있다(좀 더 젊은 자바스크립트 개발자라면 엘비스 연산자(Elvis operator)⁶로 알고 있을 수도 있다. http://mng.bz/92Zg를 살펴보라). <div>의 createElement() 내부에서 if 조건문을 사용할 수 없기 때문이다. 요점은 런타임에 반드시 값을 가져와야 한다는 것이다.

Note 삼항 연산자

다음 삼항 조건에서 userAuth가 true라면 msg 값은 ‘welcome’이다. 그렇지 않으면 값은 ‘restricted’이다.

let msg = (userAuth) ? 'welcome' : 'restricted'

이 문장은 다음 경우와 같다.

let session = ''
if (userAuth) {
  session = 'welcome'
} else {
  session = 'restricted'
}

경우에 따라 삼항 연산자가 if/else 문의 축약이 되기도 한다. 그렇지만 삼항 연산자를 값을 반환하는 표현식으로 사용하려는 경우에는 둘 사이에 큰 차이가 있다. 다음은 유효한 자바스크립트 코드다.

let msg = (userAuth) ? 'welcome' : 'restricted'

반면에 아래 if/else 문은 표현식이 아니라 문장이므로 코드가 유효하지 않다.

let msg = if (userAuth) {'welcome'} else {'restricted'} // Not valid

JSX 작성 시 삼항 연산자의 이런 성질을 이용하면 런타임에 값을 가져오도록 할 수 있다.

6 역주 미국 가수 엘비스 프레슬리의 헤어 스타일에 삼항 연산자의 모양을 빗대어 엘비스 연산자라 부른다고 한다(https://goo.gl/xMaZKT).

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.