프로그래머스 데브코스 77일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 도서 주문과 주문 목록을 구현해 보겠습니다.

 

📖Book Store 프로젝트

📄useMemo

useMem훅은 성능 최적화를 위해 연산된 값을 재사용할 수 있게 도와줍니다. 값을 저장해 두고 값의 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하고, 값에 변경이 있을 때만 값을 연산하고 성능을 최적화시킵니다.

 

자세한 내용은 공식 사이트에서 확인할 수 있습니다.

Hooks API Reference – React

🍯tip! VSCode custom snippet 만들기

 

📄URL과 같이 데이터 전달하기

화면을 이동하면서 데이터를 넘겨주고 싶은 상황이 발생할 수 있습니다. 이때 이용할 수 있는 것이 'react-router-dom 라이브러리'에서 제공해 주는 훅인 useNavigate와 useLocation을 활용할 수 있습니다.

// Basket.tsx
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate("/order", { state: orderData });

// Order.tsx
import { useLocation } from 'react-router-dom';

const location = useLocation();
const orderDataFromBasket = location.state;

 

자세한 내용은 useNavigate와 useLocation 사이트를 첨부하겠습니다.

useLocation v6.25.1 | React Router

useNavigate v6.25.1 | React Router

 

🍯tip! form 태그 내부의 button 태그를 사용할 경우 자동으로 type이 submit으로 적용되기 때문에 단순한 버튼으로 사용하고 싶은 경우 type을 하드 코딩으로 type을 button으로 지정해 줄 필요가 있다.

 

📄주소 검색

duam에서 제공하는 우편번호 검색 서비스를 이용해 주소를 검색합니다. 해당 서비스는 Key도 필요 없고, 사용량에 대한 제한도 없습니다.

 

자세한 내용은 사이트에서 확인 바랍니다.

Daum 우편번호 서비스

 

📑스크립트 로드

해당 서비스를 이용하기 위해서는 script 태그를 작성해야 하는데, 실제 사용되는 부분이 주문할 때뿐이기 때문에 주문할 때만 document로 스크립트를 로드해서 사용하겠습니다.

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

const Component = ({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.src = SCRIPT_URL;
    script.async = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);
  
  return ...
});

 

📑타입 추가 .d.ts

다만 타입스크립트를 사용하는 경우 window에서 없던 daum을 사용하기 때문에 에러가 발생합니다. 이때 타입스크립트에서 파일을 추가하면 사용할 수 있습니다.

 

자세한 내용은 타입스크립트 사이트에서 확인할 수 있습니다.

Documentation - Modules .d.ts

 

자세한 프로젝 코드는 Github에 있습니다.

ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool

 

❔▪❓

Q. Styled Components를 사용하다 보면 다른 컴포넌트에서 같은 스타일을 사용하는 경우 가져다 사용할 수 있는데 이때 개별적인 스타일을 적용할 수 있는 방법이 없는가? 예를 들어 스타일을 상속해 와서 추가적인 스타일을 추가한다던지 하는..

A.

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의