React Daum Postcode(카카오 우편번호 서비스)

방법이 두가지가 있었다.

1. 다음 우편번호 서비스 API 사용하기(react-daum-postcode)

https://www.npmjs.com/package/react-daum-postcode

react-daum-postcode

 

2. 카카오 우편번호 서비스에서 제공해주는 가이드보고 활용하기

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

Daum 우편번호 서비스

 

나는 1번 방식을 활용하다가 사용해야하는 속성이 있어서 2번 방식으로 바꾸었다.

간편한 건 1번이 더 간편한데 다양하게 활용하려면 2번 방식이 더 좋은 듯

---

1번 방식 : 다음 우편번호 서비스 API (react-daum-postcode) 사용하기

- 설치

yarn add react-daum-postcode

or

npm install react-daum-postcode

 

- 리액트 컴포넌트 처럼 <DaumPostcode /> 컴포넌트를 import해서 사용할 수 있다.

import DaumPostcode from 'react-daum-postcode';

const Postcode = () => {
  return (
    <div>
      <DaumPostcode />
    </div>
  );
}

 

모달창이 열리면 DaumPostcode 컴포넌트가 보이도록 하고, 주소 입력이 완료되면 completeHandler 함수 실행

completeHandler 함수

도로명주소랑 상세주소만 받으면 됐어서 주소 입력 완료시에 도로명 주소 상태만 업데이트하고

이후 상세주소도 입력 받으면 업데이트 되도록 구현했었다.

---

전체코드

 

이후 data는 아래와같이 돌아오는데 여기서 address랑 sido, sigungu도 백엔드에 넘겨야 했음

그런데 지금 sido는 "경기"로 되어있는데 이걸 백엔드는 "경기도" 형태로 받고 싶어했고

알아보니 아래 shorthand라는 속성으로 기본 축약 표시되어있는 것을 false 처리하면 된다고 했다.

기본적으로 shorthand는 true 처리 되어있어서 경기, 서울 이런식으로 표시됨

 

그래서 해당 속성으로 사용하려고 하니 .. 이 방법으로는 안되는 것같고 2번으로 사용해야해서 급하게 구현을 변경했다.

 

2번 방식 : 가이드보고 활용하기

먼저 아래 스크립트를 index.html 에 추가한다.

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

index.html

나는 위 방식을 사용했는데 코드를 리액트 형태로 바꾸고 나한테 필요한 값만 가져와서 사용했다.

버튼 클릭하면 handleAddressSearch 함수가 실행되는데

여기서 new window.daum.Postcode(~~~~) 이 안에서 내가 원하는 것을 할 수 있었던 것

onComplete는 주소 다 입력받고나서 실행되고

나에게 필요한 건 shorthand:false 였다.. 저거 쓰려고 코드를 다 바꿈 ㅡㅡ 

그래도 하니까 sido가 원하는 "경기도" 형태로 돌아온다 !

해당 값을 백엔드에 넘기기만 하면 끝 ~

전체코드

해당 속성말고도 여기서는 사용할 수 있는 속성이 많은 것 같다.

다양하게 활용하고 싶으면 가이드보고 따라하는 것을 추천한다. 근데 1번 방식이 엄청 간편하긴 함.