[15주차 Day3] 스프린트 3: React(TypeScript) 기반의 동적 UI 개발

반 히·2024년 6월 10일

TIL 데브코스 프로그래머스

데브코스

목록 보기

42/58

📚 Part 10 주문

📁 주문서 작성

📌 주문서 작성

1. 장바구리로부터 넘어온 정보를 화면에 표시하고 보존 (navigate로 넘김)
2. 주소, 수령인, 전화번호 입력 및 검증
3. 데이터를 가공하여 서버에 전달 (배송 정보와 장바구니로부터 넘어온 장바구니 주문 정보를 서버에 전달함)

function Order() {
    const location = useLocation();
    const orderDataFromCart = location.state;
    const { totalQuantity, totalPrice, firstBookTitle } = orderDataFromCart;

    const { 
        register, 
        handleSubmit, 
        formState: { errors }
    } = useForm<DeliveryForm>();

    const handlePay = (data: DeliveryForm) => {
        const Orderdata: OrderSheet = {
            ...orderDataFromCart,
            delivery: {
                ...data,
                address: `${data.address} ${data.addressDetail}`
            }
        };

        // 서버로 넘겨준다 
        console.log(Orderdata);
    };
  //생략
}

📌 주소 찾기 기능

https://postcode.map.daum.net/guide

import Button from '../common/Button';
import { useEffect } from 'react';

interface Props {
    onCompleted: (address: string) => void;
};

const SCRIPT_URL = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";

function FindAddressButton({onCompleted}: Props) {
    const handleOpen = () => {
        new window.daum.Postcode({
            onComplete: (data: any) => {
                onCompleted(data.address as string);
            }
        }).open();
    };
    
    useEffect(() => {
        const script = document.createElement('script'); //<script></script>
        script.src = SCRIPT_URL;
        //<script src = "URL"></script>
        script.async = true;
        document.head.appendChild(script);
        //<head><script src = "URL"></script></head>
        
        return () => {
            document.head.removeChild(script);
        }
    }, []);

    return (
        <Button type='button' size='medium' scheme='normal' onClick={handleOpen}>
            주소 찾기
        </Button>
    );
}

📁 주문 내역

📌 주문 내역

저장된 주문 내역을 목록(table)로 표시
[자세히] 버튼으로 상세 정보 패널을 토글 (상세 정보 api 요청을 함께하기)

const selectOrderItem = (orderId: number) => {
  // 요청 방어
  if (orders.filter((item) => item.id === orderId)[0].detail) {
    setSelectedItemId(orderId);
    return;
  }

  fetchOrder(orderId).then((orderDetail) => {
    setSelectedItemId(orderId);
    setOrders(
      orders.map((item) => {
        if (item.id === orderId) {
          return {
            ...item,
            detail: orderDetail,
          };
        }
        return item;
      })
    );
  });
};

hooks : useOrders.ts

📚 Part 11 중간 회고

📁 작업 중간 회고

📌 회고를 하는 이유

성장과 학습
문제 해결
유연성과 적응성
퍼포먼스 향상

➡️ "더 잘하려고"

📌 주요 학습 주제

타입과 모델
데이터 흐름
컴포넌트 작성
css 스타일링
커스텀 훅

🔗 hooks

use를 앞에 붙임. 데이터를 제공하는 hook 생성 가능. 별도의 상태를 가지고 기능을 하면 모두 다 훅으로 작성할 수 있고, 이 hook을 통해서 컴포넌트 간의 데이터 교환이나 자주 사용되고 있는 데이터의 흐름, 화면 로직 등을 쉽게 공통 모듈로써 작성할 수 있음.