[1.2장 상품목록 화면] [1.3장 주문내역 화면]

1.2.3 Button

const Button = ({ styleType, block, children, onClick }) => {
  let className = "Button";
  if (styleType) className += ` ${styleType}`;
  if (block) className += ` block`;


  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
};
export default Button;

<Button styleType={"brand-solid"} block>주문하기</Button>

이런식으로 styleType , block등을 주입해서 Button component를 여러방면으로 사용할 수 있다.

마찬가지로 onClick또한 주입받아서 좀 더 확장성 있게 button을 쓸 수 있다.

import { rest } from "msw";

const Button = ({ styleType, block, ...rest }) => {
  let className = "Button";
  if (styleType) className += ` ${styleType}`;
  if (block) className += ` block`;

  return <button className={className} {...rest}></button>;
};
export default Button;

javascript ...rest를 이용하여 children, onclicks 를 퉁칠 수 도 있다.

https://www.inflearn.com/questions/1186424/1-2%EC%9E%A5-%EC%83%81%ED%92%88%EB%AA%A9%EB%A1%9D-%ED%99%94%EB%A9%B4-1-2-3-button-%EC%97%90%EC%84%9C-%EA%B8%B0%EB%B3%B8-props-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8%EC%9D%B4-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4

[1.2장 상품목록 화면] 1.2.3 Button 에서 기본 props? 관련 질문이 있습니다. - 인프런

---

주문내역화면

class OrderPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      order: null,
    };
  }

  async fetch() {
    try {
      const order = await OrderApi.fetchMyOrder();
      this.setState({ order });
    } catch (e) {
      console.error(e);
    }
  }

  componentDidMount() {
    this.fetch();
  }

  render() {
    const { order } = this.state;

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

export default OrderPage;

OrderPage에는 3가지 Card로 이루어져있다.

또한 클래스 Component로 state로 order를 가지고 있고 매번 backend api를 호출해서 state가 변경되면 setState가 호출되면서 렌더링이 진행된다.

const Card = ({ header, data = [], footer }) => (
  <div className="Card">
    {header && <header>{header}</header>}
    <main>
      {data.map(({ term, description }) => (
        <dl key={term}>
          <dt>{term}</dt>
          <dd>{description}</dd>
        </dl>
      ))}
    </main>
    {footer && <footer>{footer}</footer>}
  </div>
);

export default Card;

각 구체적인 구현체 Card는 해당 Card Componenet를 기반으로 만들어져있다.

좀 더 확장할 수 있게 header, data, footer를 직접입력 받는 형식이다.

const OrderDiliveryCard = ({ order }) => {
  const { deliveryAddress, deliveryContact, messageToShop, messageToRider } =
    order;
  return (
    <Card
      data={[
        { term: "배달주소", description: deliveryAddress },
        { term: "전화번호", description: deliveryContact },
        { term: "가게사장님께", description: messageToShop },
        { term: "라이더님께", description: messageToRider },
      ]}
    />
  );
};

export default OrderDiliveryCard;

Card 구현체의 예시인 OrderDeliveryCard이다. 필요한 data만 주입시키는것을 확인 할 수 있다.