[React] JSX의 if/else문

 

가장 기본적이고 제일 익숙한 모습의 if/else문

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>
}

 

즉시실행함수를 사용한 방법.  link(this.props.user.session) 과 같은 방식으로 sessionFlag 파라미터에 값을 할당한다.

render(){
    let link = (sessionFlag) => {
      if (sessionFlag)
          link = <a href ='/logout'>Logout</a>
      else
          link = <a href ='/login'>Login</a>
    }
    return <div>{link(this.props.user.session)}<div>
}

 

 link 변수를 사용하지 않고 즉시실행함수를 사용한 방법.

 

위 코드의 return을 보면 아래와 같이 되어있는데 여기의 link자리에 위에서 구현한 즉시실행함수를 넣어주면된다. 

return <div>{link(this.props.user.session)}<div>

 

아직 적응이 안되서 그런지 눈에 쉽게 들어오는 느낌은 아니다.

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

 

 

삼항연산자를 사용한 방법. 

A ? B : C 인 경우 A조건이 참이면 B를 return 하고 A조건이 거짓이면 C를 return 한다

render(){
    
    return <div>{(this.props.user.session)
                 ? <a href='/logout'>Logout</a>
                 : <a href='/login'>Login</a> }
           <div>
}