주문 상세 페이지를 구현하세요. URL에서 orderId를 받아 주문 정보를 표시합니다.
function OrderPage() {
const { orderId } = useParams();
const [order, setOrder] = useState(null);
useEffect(() => {
if (orderId) {
fetch(`/api/orders/${orderId}`)
.then((res) => res.json())
.then((data) => {
if (data && data.id) {
setOrder(data);
}
});
}
}, [orderId]);
if (!order) return <div>Loading...</div>;
// order.items가 있을까? order.total이 number일까?
const total =
order.items?.reduce((sum, item) => {
const price = Number(item.price) || 0;
const quantity = Number(item.quantity) || 1;
return sum + price * quantity;
}, 0) || 0;
return <div>Total: ${total}</div>;
}
TypeScript
복사
문제점:
•
orderId 존재 여부를 계속 체크
•
API 응답 구조를 신뢰할 수 없음
•
타입이 불확실해서 방어적 코드 남발
