3.2.6 JSX의 if/else 처리

동적 변수를 렌더링했던 것과 유사하게, 개발자는 if/else 조건의 결과에 따라 컴포넌트가 뷰를 변경할 수 있도록 작성해야 하는 경우도 있다. 먼저 컴포넌트 클래스에 조건에 따라 다른 링크 엘리먼트를 렌더링하는 간단한 예제를 생각해보자. 예를 들어 링크의 텍스트와 URL은 user.session 값에 따라 다르게 렌더링된다. 다음은 일반적인 자바스크립트로 작성한 예제다.

...
render() {
  if (user.session)
      return React.createElement('a', {href: '/logout'}, 'Logout')
  else
      return React.createElement('a', {href: '/login'}, 'Login')
}
...

 

이와 비슷한 방법으로 JSX를 사용해 다시 작성해보면 다음과 같다.

...
render() {
  if (this.props.user.session)
      return <a href="/logout">Logout</a>
  else
      return <a href="/login">Login</a>
}
...