리액트 조건부 렌더링

const GroupCard = (props: Props) => {
  const { routeToGroupDetail, routeToGroupRequest } = useRoute()
  const tagText = props.hashtag.map((tag) => `#${tag}`).join(' ')

  return (
    <li className="flex flex-col py-4 gap-y-3">
      <GroupInfo {...props} onClickCard={() => routeToGroupDetail(props.id)}>
        <div className="text-sm text-[#808080]">{tagText}</div>
      </GroupInfo>
      {props.sex === 'm' ? (
        <Button className="text-blue-400 border-blue-400" onClick={() => routeToGroupRequest(props.id)}>
          바로 신청하기
        </Button>
      ) : (
        <Button onClick={() => routeToGroupRequest(props.id)}>바로 신청하기</Button>
      )}
    </li>
  )
}

에서 조건부 렌더링은 아래와 같다.

{props.sex === 'm' ? (
        <Button className="text-blue-400 border-blue-400" onClick={() => routeToGroupRequest(props.id)}>
          바로 신청하기
        </Button>
      ) : (
        <Button onClick={() => routeToGroupRequest(props.id)}>바로 신청하기</Button>
)}