[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다

강의를 듣다가 의문이 생겨서 질문 드립니다.

const OrderPage = () => (
  <div className="OrderPage">
    <Page header={<Title>주문내역</Title>} footer={<Navbar />}>
      <OrderStatusCard order={fakeOrder} />
      <OrderPaymentCard order={fakeOrder} />
      <OrderDeliveryCard order={fakeOrder} />
    </Page>
  </div>
);

위 코드는 수업중 강사님이 작성하신 코드 입니다.

제가 의문인 부분은 OrderStatusCard, OrderPaymentCard, OrderDeliveryCard 모두 같은 fakeOrder를 파라미터로 넘기는 점 입니다.

fakeOrder는 Order가 발생될 때 생기는 모든 데이터를 저장하고 있습니다.

이때 OrderStatusCard 관점에서 보면 Status와 상관 없는 데이터들도 fakeOrder를 받으면서 같이 파라미터로 넘어가게 됩니다.(예를 들어 deliveryPrice, discountPrice 등 배달에 관련 데이터가 같이 넘어갑니다.)

해당 실습 예제 코드는 적은 데이터를 사용해서 문제가 없겠지만 만약 수 많은 데이터가 한번에 오고 갈때 성능적인 이슈가 발생하는 문제와 status와 상관없는 데이터들이 넘어가 컴포넌트들이 완벽하게 분리 되지 않는 느낌이 있습니다.

제가 생각한 방법은 조금 귀찮더라도 Order정보를 가지고 있는 OrderPage에서 데이터를 분리해서 넘겨주는 것이 좋다고 생각합니다.

아래는 제가 작성한 코드입니다.

const OrderPage = () => (
  <div className="OrderPage">
    <Page header={<Title>주문내역</Title>} footer={<Navbar />}>
      <OrderStatusCard status={fakeOrder.status}
                       orderDate={fakeOrder.orderDate}
                       name={fakeOrder.name}
                       id={fakeOrder.id}
      />
      <OrderPaymentCard totalPrice={fakeOrder.totalPrice}
                        paymentMethod={fakeOrder.paymentMethod}
                        productPrice={fakeOrder.productPrice}
                        deliveryPrice={fakeOrder.deliveryPrice}
                        discountPrice={fakeOrder.discountPrice}
      />
      <OrderDeliveryCard deliveryAddress={fakeOrder.deliveryAddress}
                         deliveryContact={fakeOrder.deliveryContact}
                         messageToRider={fakeOrder.messageToRider}
                         messageToShop={fakeOrder.messageToShop}
      />
    </Page>
  </div>
);

현업에서는 어떤 방식을 사용하는지 강사님의 의견을 듣고 싶습니다. 좋은 강의 잘 듣고 있습니다. 긴글 읽어주셔서 감사합니다 ㅎㅎ