React 6일차

조건부 렌더링

&& 논리 연산자를 사용해 if를 인라인으로 넣기

• React는 문자열, 숫자는 잘 그려주는데, true, false, null 등은 화면에 안 그려준다.
• &&는 앞의 코드가 falsy이면 앞의 걸 반환하고, 앞의 코드가 true이면 뒤의 걸 반환한다.

function Mailbox(props) {
  // unreadMessages.length는 안 읽는 메시지가 있으면 true, 안 읽은 메시지가 없으면 false가 됨
  // &&는 앞의 코드가 falsy이면 앞의 걸 반환하고, 앞의 코드가 true이면 뒤의 걸 반환한다.
  // 앞의 코드가 falsy라서 false를 반환하면, React는 아무것도 화면에 그리지 않기 때문에 if - else의 느낌으로 사용할 수 있다.

  //if ~else를 React에서 사용할 수 있으나 복잡한 UI를 그리기에 불편해서 이렇게 &&를 이용함
  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")
);

조건부 연산자를 사용해 if-else 인라인으로 넣기

// if ~else 느낌으로 삼항 연산자를 쓸 수 있다.
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

컴포넌트가 렌더링 되지 못하도록 방지

// 경고 메시지가 있으면 그려라.
// 경고 메시지가 없으면, 아무것도 그리지 말고
function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

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