Conditional-rendering(조건부 랜더링)

말그대로 조건에따라 UI를 일치하게 랜더링 (그림)하는것이다.

if문을 사용해 return으로 컴포넌트를 할 수도 있는데, 더 짧은 구문을 사용하여 작성할 수도 있다.

표현식을 중괄호로 묶어서 JSX에 임배드 하는방식이 있다.이때 JS의 논리연산자를 사용할 수 있다.(임배드:변형없이 그대로 보여줌)

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

논리연산자 && 를 사용한 방식이다. 앞의 조건이 true라면 뒤에것이 실행되며, false라면 실행되지 않는 방식이다.

---

이번에는 조건 연산자를 사용하는 방식이다. if ~else방식 이라고 할수 있다.
앞에 조건이 true라면 바로 뒤의 것을 아니라면 그 뒤의 것을 삼항연산자를 사용해 조건을 작성하는 방식이다.

condition ? true : false

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

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

알아두어야할것은 조건부가 끝나고 나서의 아래의 요소(아래의 표현식)은 반환된다는 것(아래는 그대로 실행된다는 것)을 명심할것.

출처 : 리엑트 Docs