더북(TheBook)

나쁘지 않지만 조금 투박해 보인다. 그렇지 않은가? JSX를 사용하면 {} 표기법으로 변수를 출력하고 자바스크립트 코드도 실행할 수 있다. 이 방법을 사용하여 더 나은 문법을 얻어보자.

// 방법 1: 변수
render() {
  let link
  if (this.props.user.session)
      link = <a href='/logout'>Logout</a>
  else
      link = <a href='/login'>Login</a>
  return <div>{link}</div>
}
// 방법 2: 표현식
render() {
  let link = (sessionFlag) => {
      if (sessionFlag)
          return <a href='/logout'>Logout</a>
      else
          return <a href='/login'>Login</a>
  }
  return <div>{link(this.props.user.session)}</div>
}
// 방법 3: 삼항 연산자
render() {
  return <div>
      {(this.props.user.session)
          ? <a href='/logout'>Logout</a>
          : <a href='/login'>Login</a>}
  </div>
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.