조금 더 살펴보면, 같은 방식을 전체 엘리먼트(이 예제에서는 <a>)뿐만 아니라 텍스트나 속성 값을 렌더링할 때도 적용할 수 있다. 중괄호 내에서 앞에 제시한 세 가지 방법 중 한 가지를 사용하면 된다. 예를 들어 URL과 텍스트를 확대해서 엘리먼트를 생성하기 위한 코드의 중복을 피할 수 있다. 이렇게 하면 <a>를 한 번만 쓰면 되므로 나는 개인적으로 이 방법을 선호한다.

render() {
  let sessionFlag = this.props.user.session ---- 불 값 session을 지역변수에 담아서 코드를 줄이고 나은 성능을 얻어낸다.
  return <div>
      <a href={(sessionFlag)?'/logout':'/login'}> ---- 삼항 연산자를 사용해서 sessionFlag 값에 따라 URL을 다르게 렌더링한다.
          {(sessionFlag)?'Logout':'Login'} ---- 삼항 연산자를 사용하여 다른 텍스트를 보여준다.
      </a>
  </div>
}

 

살펴본 것처럼 템플릿 엔진과 달리 JSX에는 특별한 문법이 없으며, 그저 자바스크립트를 사용하면 된다. 가장 간결한 스타일이므로 이 책에서는 삼항 연산자를 매우 자주 사용할 것이다. 요약해보면 JSX에서 if/else 조건을 구현할 때는 다음과 같은 방법을 사용할 수 있다.

• return 문 이전에 JSX 외부에서 변수를 선언한 후 JSX 내부에서 {}를 사용하여 출력한다.

• return 문 이전에 JSX 외부에서 값을 반환하는 함수 표현식을 선언한 후 JSX 내부의 {}에서 실행한다.

• 삼항 연산자를 사용한다.

• JSX 내부에서 즉시실행함수를 사용한다.