React에서는 원하는 동작을 캡슐화하는 Component를 만들 수 있습니다.

이렇게 하면 애플리케이션의 상태에 따라서 Component 중 몇 개만을 렌더링할 수 있습니다.

• React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다.

  → if 나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 Element를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트 할 것입니다.

  function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
      return <WelcomeUser/>;
    }
    return <PleaseSignup />;
  }
  
  ReactDOM.render(
    // Try changing to isLoggedIn={true}:
    <Greeting isLoggedIn={false} />,
    document.getElementById('root')
  );
  

  이 예시는 isLoggedIn prop에 따라서 다른 인사말을 렌더링 합니다.

• 논리 && 연산자로 If를 인라인으로 표현하기

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

  JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.

  따라서 && 뒤의 Element는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시하고 건너뜁니다.

  falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해주세요. 아래 예시에서, <div>0</div>이 render 메서드에서 반환됩니다.

  render() {
    const count = 0;
    return (
      <div>
        { count && <h1>Messages: {count}</h1>}
      </div>
    );
  }
  *// false -> <div>0</div>
  // true -> <div><h1>Messages: 2</h1></div>*
  

• 조건부 연산자로 If-Else구문 인라인으로 표현하기

  Element 조건부로 렌더링하는 다른 방법은 조건부 연산자인 condition ? true : false 를 사용하는 것입니다.

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

  가독성은 좀 떨어지지만, 더 큰 표현식에도 이 구문을 사용할 수 있습니다.

  JavaScript와 마찬가지로, 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건이 너무 복잡하다면 컴포넌트를 분리하기 좋을 때 일 수도 있다는 것을 기억하세요

< 컴포넌트가 렌더링하는 것을 막기 >

가끔 다른 Component에 의해 렌더링될 때 Component 자체를 숨기고 싶을 때가 있을 수 있습니다.

이때는 렌더링 결과를 출력하는 대신 null을 반환하면 해결할 수 있습니다.

function WarningBanner(props) {
  if (!props.warn) {
    return null; // null
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
	// ...(생략)

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} /> // null or expression
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

Component의 render 메서드로부터 null 을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않습니다. 그 예로 componentDidUpdate() 는 계속해서 호출되게 됩니다.