28강 수강 중 JSX 작성 방법에 대해 궁금해져서 질문 남깁니다!

화면을 출력할 때,
강사님이 작성하신

const ItemComponents = orderType === "products" ? Products : null;

const optionItems = items.map((item) => (
  <ItemComponents
    key={item.name}
    name={item.name}
    imagePath={item.imagePath}
  />
));

return <div>{optionItems}</div>;

이 코드와

  return (
    <div>
      {orderType === "Products"
        ? items.map((item) => (
            <Products
              key={item.name}
              name={item.name}
              imagePath={item.imagePath}
            />
          ))
        : null}
    </div>
  );

제가 익숙하게 사용하는 방식인 이 코드의 차이점이 있을까요?

혼자 생각해봐도 차이점을 알 수 없어서 질문 남깁니다
성능상의 이점이나 코드를 읽기 수월해진다는 이점인지, 혹은 코드 스타일인지 궁금합니다! :)

좋은 강의 감사합니다!