인프런 커뮤니티 질문&답변
작성한 질문수
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
작성
·
192
·
수정됨
2
강의를 듣다가 의문이 생겨서 질문 드립니다.
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>
);현업에서는 어떤 방식을 사용하는지 강사님의 의견을 듣고 싶습니다. 좋은 강의 잘 듣고 있습니다. 긴글 읽어주셔서 감사합니다 ㅎㅎ
답변 1
1
데이터를 전달하는 방식에 관해 궁금하신 것 같습니다. 컴포넌트도 클래스나 함수이기 때문에 문제를 더 일반적으로 정의하면 '함수(혹은 객체)에 메세지를 전달하는 방법' 정도가 될 수 있겠네요.
메세지를 인자로 전달하는 방식이 객체나 원시 타입인 경우가 있는데요. 둘 간의 성능적인 차이는 없다고 봅니다. 오히려 원시 타입 인자는 함수를 실행할 때마다 값을 복사하기 때문에 메모리를 더 쓰게 될 거에요. 물론 이것이 성능 저하에 의미있는 영향을 미치진 않고요.
저는 추상화 관점으로 바라 봅니다. 객체나 함수에게 메세지를 전달할 때 추상화된 값을 전달하는 것이 원시타입을 전달하는 것 보다 사람이 이해하기 쉽기 있기 때문입니다.
아래 코드는 ' 컴포넌트에게 order 객체를 전달한다'라고 읽을 수 있어요.
<OrderStatusCard order={fakeOrder} />한편 아래 코드는 좀 더 구체적이죠.
<OrderStatusCard
status={fakeOrder.status}
orderDate={fakeOrder.orderDate}
name={fakeOrder.name}
id={fakeOrder.id}
/>정답은 명확치 않습니다. 상황에 따라 달라요.
어플리케이션 안에서 주된 도메인 객체(order)가 있는 상황이라면 이걸 잘 활용하는 것이 코드 관리에 좋습니다. 객체 단위로 생각할 수 있기 때문이에요. 컴포넌트도 이 도메인 객체 단위로 설계해 order 인자를 전달한 것이고요.
컴포넌트가 도메인 정보를 알 필요가 없다면 두 번째가 더 합당할 거에요. 특정 인자에 도메인 냄새가 없어서 원시 타입의 값을 받도록 설계할 수 있기 때문입니다.
친정한 답변 감사합니다 ㅎㅎ