다음 우편번호 api 사용해보기

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

Daum 우편번호 서비스

 

회원가입 기능을 만들던 중 우편번호를 사용해 주소를 입력하는 기능을 넣기로 했다.

지금까지는 단순하게 그냥 주소를 적어달라 input을 만들었는데 사용자의 입장에서 귀찮을 수 있다 생각해서 찾아보게 되었다.

사용을 해보고 나니 정말 간단하고 투자한 시간에 비해 굉장히 만족스러웠다.

 

사용법

우선 사용을 하려면 당연히 설치를 해줘야 한다.

npm install react-daum-postcode

 

다운을 해주면 벌써 거의 다 한것이다.

 

사용할 곳에 

import DaumPostcode from "react-daum-postcode";

<DaumPostcode
    onComplete={onCompletePost}
></DaumPostcode>

이 친구를 추가해주면 된다.

 

난 모달에 띄워서 보여주기로 해서 

 

{addressModal && (
    <Portal>
      <Modal close={setAddressModal}>
        <DaumPostcode
          onComplete={onCompletePost}
          className={style.searchAddress}
        ></DaumPostcode>
      </Modal>
    </Portal>
)}

이런식으로 사용해줬다.

 

이 방식이 아니어도 자신이 원하는 방법이 있다면 그 방법으로 띄워주면 된다.

 

const onCompletePost = (data: any) => {
    console.log(data);
  };

그리고 이 onCompletePost 함수를 사용해서 받아와 주는 것이다.

 

그럼 이런식으로 값이 담겨져 올것이다.

 

이것을 사용해 value로 넣어준다던가 해주면 될 것 같다.