TIL 20211103[99便目]

CardAdd構成部品条件レンダリングの適用

const CardAdd = () => {
  const cardListCheck = useSelector((state) => state.cards.cardList);
  const cardList = useSelector((state) => state.cards);

  if (cardListCheck.length === 0) {
    return (
      <Grid>
        <Btn
          onClick={() => {
            history.push('/write');
          }}
        >
          프로젝트 추가하기
        </Btn>
        <Grid>
          +
        </Grid>
      </Grid>
    );
  }
  return (
    <Grid>
      <Btn
        onClick={() => {
          history.push('/write');
        }}
      >
        프로젝트 추가하기
      </Btn>
      {cardList.allIds.map((cardId) => {
        return (
          <Grid key={cardId}>
            <CardPortfolio cardId={cardId} />
          </Grid>
        );
      })}
    </Grid>
  );
};

export default CardAdd;

反応条件レンダリング

論理&&演算子を持つインライン条件

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')
);

条件付き演算子の行内If-Else

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

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