[React] React.js 강좌 7. 조건부 연산자

React.js 조건부 연산자

 

 

흔히 사용하는 if 조건부 말고도 여러 조건들을 JSX 안에서 인라인으로 처리할 수 있는 방법이 있습니다.

논리 && 연산자로 if를 인라인으로 표현할 수가 있는데요.

 

JSX안에는 중괄호를 이용해서 표현식을 포함할 수 있습니다. 이때, 그 안에 Javascript의 논리 연산자 &&을 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다.

 

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

 true && expression라고 표현할 수가 있는데, 위 코드를 해석하면 unreadMessages.Length가 0 이상일 경우에 && 뒤에 있는 <h2> 태그가 출력되는 구조입니다.

 

물론 조건이 false라면 우측에 있는 태그는 출력되지 않습니다.

 

 

 

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

하지만 위 코드처럼 <div> 내부에서 && 표현식을 사용할 경우 false라도 <div>0</div>와 같이 render가 된다는 점 참고해야 합니다.

 

 

 

 

 

다른 방법으로는 조건부 연산자로 If-Else 구문을 인라인으로 표현할 수가 있습니다.

condition ? true : false라고 표현하는데,

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

isLoggedIn이 true/false 일때 우측에 값이 표시가 되는 삼항연산자와 같은 표현을 할 수 있습니다.

 

 

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

위와 같이 더 큰 문장도 표현할 수가 있습니다.