[Week13] React(TypeScript) 기반의 동적 UI 개발(7)

지난 시간에 이어 북스토어 프로젝트의 도서 주문과 주문 목록 화면을 구현하는 과정을 정리해 볼게요.

성능 최적화를 위한 useMemo

useMemo 훅은 성능 최적화를 위해 연산된 값을 재사용할 수 있게 도와줘요. 연산된 값을 메모리에 저장해 두고, 의존성 배열에 있는 값이 바뀌지 않았다면 이전에 연산한 값을 그대로 재사용해요. 값이 변경되었을 때만 다시 연산을 수행하기 때문에 불필요한 렌더링과 연산 부하를 줄일 수 있어요.

화면 이동 시 데이터 전달하기

화면을 이동하면서 특정 데이터를 함께 넘겨주어야 하는 상황이 생길 수 있어요. 이때 react-router-dom 라이브러리에서 제공하는 useNavigate 와 useLocation 훅을 활용할 수 있어요.

// Basket.tsx (데이터를 보내는 쪽)
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
// state 속성을 통해 이동할 경로로 데이터를 함께 넘겨줘요.
navigate("/order", { state: orderData });

// Order.tsx (데이터를 받는 쪽)
import { useLocation } from 'react-router-dom';

const location = useLocation();
// location.state를 통해 전달받은 데이터를 꺼내서 사용할 수 있어요.
const orderDataFromBasket = location.state;

참고로 form 태그 내부에서 button 태그를 사용할 경우, 기본 타입이 submit 으로 자동 지정돼요. 폼 제출 목적이 아닌 단순한 클릭 버튼으로만 사용하고 싶다면 하드 코딩으로 type="button" 을 명시해 주어야 해요.

우편번호 서비스와 동적 스크립트 로딩

주소 검색 기능을 구현하기 위해 별도의 키 발급이나 사용량 제한이 없는 Daum 우편번호 서비스를 활용했어요.

해당 서비스를 이용하려면 외부 스크립트를 불러와야 해요. 하지만 이 스크립트는 프로젝트 전체가 아닌 주문 페이지에서만 필요하므로, 해당 컴포넌트가 마운트될 때만 document.createElement 를 이용해 스크립트를 동적으로 로드하도록 구현했어요.

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

const AddressSearchComponent = ({ onCompleted }: Props) => {
  const handleOpen = () => {
    new window.daum.Postcode({
      onComplete: (data: any) => {
        onCompleted(data.address as string);
      },
    }).open();
  };

  useEffect(() => {
    // 컴포넌트가 마운트될 때만 스크립트를 문서에 추가해요.
    const script = document.createElement("script");
    script.src = SCRIPT_URL;
    script.async = true;
    document.head.appendChild(script);

    // 컴포넌트가 언마운트될 때 스크립트를 제거해요.
    return () => {
      document.head.removeChild(script);
    };
  },