[상세] DeliveryList.tsx

//DeliveryList.tsx

import React, {PropsWithChildren, useState, useEffect} from "react";
import DeliveryItem from "../component/DeliveryItem"


const DeliveryList = () => {
	const [deliveries, setDeliveries] = useState([
      {
        orderNo: "0001",
        orderName: "Alren",
        productNo: "PRD001",
        productName: "MATH",
        recipient: "john",
        address: "12420, 서울시 강남구",
        deliveryCharge: false,
        status: "Ready"		//상품발송
      },
      {
        orderNo: "0002",
        orderName: "Kate",
        productNo: "PRD002",
        productName: "SCIENCE",
        recipient: "lilly",
        address: "18392, 서울시 서초구",
        deliveryCharge: true,
        status: "InProgress"		//배송완료
      },
      {
        orderNo: "0003",
        orderName: "May",
        productNo: "PRD003",
        productName: "PHYSICS",
        recipient: "babylon",
        address: "15782, 경기도 하남시",
        deliveryCharge: false,
        status: "Delivered"
      },
      {
        orderNo: "0004",
        orderName: "Harley",
        productNo: "PRD004",
        productName: "SOCIETY",
        recipient: "salmon",
        address: "10235, 강원도 철원시",
        deliveryCharge: false,
        status: "Complated"
      }
    ]);
  
  
  return (
    <React.Fragment>
    	<div className="DeliveryList">
    		<table className="table table-striped">
    			<thead>
    				<tr>
                      <th scope="col">주문번호</th>
                      <th scope="col">주문자명</th>
                      <th scope="col">상품번호</th>
                      <th scope="col">상품명</th>
                      <th scope="col">수령인</th>
                      <th scope="col">배송주소</th>
                      <th scope="col">배송비</th>
                      <th scope="col">배송상태</th>
    				</tr>
    			</thead>
    			<tbody>
    				{deliveries.map((delivery) => {
    					<DeliveryItem delivery={delivery} key={delivery.orderNo}/>
  					})}
    			</tbody>
    		</table>
		</div>
    </React.Fragment>
  )
};



export default DeliveryList;

props 로 children 을 내려주고 children의 타입을 설정해줄때가 있다. 이때, children의 타입을 선언하는 방법

1. 직접 children에 대한 타입을 선언해 줄 수 있다. children에 ReactNode를 직접 명시

interface Props {
  isOpende: boolean;
  handleCloseModal: () => void;
  children: ReactNode;
}

const Modal = ({ isOpened, handleCloseModal, children }: Props) => {

  return (
    <Portal isOpened={isOpened}>
    	<>
    		<Dimmer hasBackgroundColor={true} onClick={handleCloseModal}/>
            {children}
    	</>
    </Portal>
  )
}

2. 리액트에서 제공하는 PropsWithChildren 타입을 사용하는 방법 : PropsWithChildren 타입을 사용하게 되면 반복적으로 children 타입을 설정해줘야하는 번거로움이 사라질 수 있다.

interface Props {
  isOpened: boolean;
  handleCloseModal: () => void;
}

const Modal = ({
  isOpened,
  handleCloseModal,
  children,
}: PropsWithChildren<Props>) => {
  
  return (
    <Portal isOpened={isOpened}>
    	<>
    		<Dimmer hasBackgroundColor={true} onClick={handleCloseModal}/>
            {children}
    	</>
    </Portal>
  )
}

3. PropsWithChildren 타입이 어떻게 작성되어 있는지 d.ts 파일 확인

type PropsWithChildren<P = unknown> = P & { children ? : ReactNode | undefined};

-> PropsWithChildren 의 children 타입이 옵셔널이다.
--> children 타입이 옵셔널이라면 이게 안전한 타입인가 ?
--> children 이 존재하지 않더라도 에러가 발생하지 않는데, PropsWithChildren을 사용해도 좋을까 ??
---> 프로젝트에 따라 다를 수 있다.
---> 참조