1. 우편번호검색

우편번호 검색을 위한 라이브러리

사용법

1. index.html 파일에 스크립트 태그 추가

<body>
  <div id='root'></div>
  <script src='https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'></script>
  <script type='module' src='./src/main.tsx'></script>
</body>

위와 같이 스크립트를 로드하게 되면, Daum의 우편번호 서비스 API를 로드하는 스크립트 태그는 CDN (Content Delivery Network)에서 JavaScript 파일을 가져와서 작동하게 된다.

즉, src에서 지정한 URL은 Daum의 CDN에서 호스팅되는 파일을 가리킨다.

브라우저는 이 스크립트 태그를 만나면 지정된 URL로 요청을 보내고, 성공하게되면 다음의 우편번호 서비스 API 코드가 포함된 JavaScript파일을 다운로드하고, 브라우저 환경에서 실행된다.

이를 통해 웹페이지는 주소 검색 등의 API에서 제공하는 기능을 활요할 수 있다.

2. React&TypeScript 에서 사용하기(타입 지정)

문서에서 제공하는 간편 사용법을 보면 아래와 같이 되어있다.

<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
        }
    }).open();
</script>

그런데 TypeScript에서는 new daum.Postcode() 객체의 타입을 알 수 없기 때문에, 별도의 파일을 만들어서 Type을 알 수 있도록 한다.

아래와 같이 daum.postcode.d.ts 파일을 만들고, daum이라는 네임스페이스를 등록한다.

// daum.postcode.d.ts
declare namespace daum {
  export type PostcodeResult = {
    address: string;
    zonecode: string;
  };

  export class Postcode {
    constructor({
      oncomplete,
      width,
      height,
    }: {
      oncomplete: (data: PostcodeResult) => void;
      width: string;
      height: string;
    });

    embed(element: HTMLElement | null);
  }
}

3. 우편번호 검색을 위한 컴포넌트 만들기

검색을 위한 컴포넌트 AddressSearch를 생성한다.(컴포넌트 명은 자유)

export default function AddressSearch({
  close,
  changeAddress,
}: AddressSearchProps) {
  const refElement = useRef<HTMLDivElement>(null);

  useEffectOnce(() => {
    new daum.Postcode({
      oncomplete(data) {
        const { address, zonecode: postalCode } = data;
        changeAddress({ address, postalCode });
        close();
      },
      width: '100%',
      height: '100%',
    }).embed(refElement.current);
  });

  return (
    <Container id='address-search-container' onClick={close}>
      <div ref={refElement} />
    </Container>
  );
}

close: 검색창을 닫는 props로 전달된 함수. 상위 컴포넌트에서 useBoolean 의 setFalse 함수.
changeAddress: Form 데이터의 value 값을 변경하는 사용자 정의 이벤트 함수
useRef<HTMLDivElement>(null) 는 div 태그 자체를 ref

상위 컴포넌트의 코드는 아래와 같은 형태가 된다.

export default function ~Component() {
  const {
    value: searching,
    setTrue: openSearch,
    setFalse: closeSearch,
  } = useBoolean();

  // …(중략)…

  const handleClickSearchPostalCode = () => {
    openSearch();
  };

  return (
    // ...
    {searching && (
      <AddressSearch
        close={closeSearch}
        changeAddress={handleChangeAddress1}
    />
    )}
  );
}

다양한 옵션

문서에서 찾아보면 다양한 요구조건을 충족시킬 수 있도록 옵션을 제공한다. 상황에 맞게 찾아서 사용할 수 있다.

팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기
사용자가 선택한 값 이용하기
iframe을 이용하여 레이어 띄우기
iframe을 이용하여 페이지에 끼워 넣기
주소를 선택하면 지도도 함께 보여주기

PreviousWEEK11 Next2. 포트원

Last updated 1 year ago