[React] 카카오 우편번호 API

주소 입력 받기

새로운 프로젝트를 시작하면서 주소값을 입력받아야 하는 일이 생겼다.

내가 주소를 입력받아서 DB에 저장하면, 다른 팀원이 map api로 해당 위치를 지도로 표현할 것이다.

 

주소를 입력받는 방법은 두가지가 있다.

행정안전부 도로명 주소 api, 카카오 우편번호 찾기 api

 

내가 봤을 땐 카카오 api의 UI가 더 직관적이어서 카카오를 선택하게 되었다.

 

주소 찾기 UI 비교

 

 

 

카카오 우편번호 찾기 서비스

 

제목은 api라고 적었지만 사실 REST API 서비스는 아니다.

카카오에서 제공하는 스크립트를 본인의 기술 스택에 알맞게 고쳐서 쓰면 된다.

한번 해볼까?

 

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

Daum 우편번호 서비스

 

카카오 우편 서비스에 들어간다.

카카오에서는 총 5개의 예제를 보여준다.

 

내가 선택한 방법은 팝업을 이용하여 도로명 주소를 받는 것이다.

 

 

팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기

 

우선 front에서 우편번호 찾기를 예쁘게 만들어주고,

우편번호 찾기를 누르면

 

 

이렇게 팝업이 뜨는 서비스이다.

참고로, 아래쪽 Powered by kakao는 지울 수 없다고 한다 😉

 

다음은 카카오에서 제공하는 예제코드이다.

 

<input type="text" id="sample4_postcode" placeholder="우편번호">
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
<input type="text" id="sample4_jibunAddress" placeholder="지번주소">
<span id="guide" style="color:#999;display:none"></span>
<input type="text" id="sample4_detailAddress" placeholder="상세주소">
<input type="text" id="sample4_extraAddress" placeholder="참고항목">

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
    function sample4_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var roadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 참고 항목 변수

                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample4_postcode').value = data.zonecode;
                document.getElementById("sample4_roadAddress").value = roadAddr;
                document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
                
                // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
                if(roadAddr !== ''){
                    document.getElementById("sample4_extraAddress").value = extraRoadAddr;
                } else {
                    document.getElementById("sample4_extraAddress").value = '';
                }

                var guideTextBox = document.getElementById("guide");
                // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
                if(data.autoRoadAddress) {
                    var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                    guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
                    guideTextBox.style.display = 'block';

                } else if(data.autoJibunAddress) {
                    var expJibunAddr = data.autoJibunAddress;
                    guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
                    guideTextBox.style.display = 'block';
                } else {
                    guideTextBox.innerHTML = '';
                    guideTextBox.style.display = 'none';
                }
            }
        }).open();
    }
</script>

 

 

해당 코드를 본인이 쓰는 기술에 맞게 변환하여 쓰면 된다.

나는 리액트를 사용할 것이므로 리액트에 알맞게 고치려고 했다.

그런데, 검색해보니 해당 코드를 react 라이브러리로 만드신 분이 계셨다.

그래서 간단하게 npm 라이브러리를 설치하여 코드를 구현했다.

 

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

react-daum-postcode

 

 

 

React에서 카카오 우편번호 서비스 구현하기

 

✅ 패키지 설치

터미널 창을 열어 라이브러리를 설치한다.

npm install react-daum-postcode

 

✅  REACT 컴포넌트 작성

          ※ 저에게 맞게 코드를 조금 수정했습니다.

import React from 'react';
import { useDaumPostcodePopup } from 'react-daum-postcode';

const Postcode = ({ onAddressSelect }) => {
  const scriptUrl =
    "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
  const open = useDaumPostcodePopup(scriptUrl);

  const handleComplete = (data) => {
    let fullAddress = data.address;
    let extraAddress = '';

    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddress += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
      }
      fullAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
    }

	onAddressSelect(fullAddress); // fullAddress를
    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };

  const handleClick = () => {
    open({ onComplete: handleComplete });
  };

  return (
    <button type='button' onClick={handleClick}>
      Open
    </button>
  );
};

 

해당 컴포넌트를 작성하면 우편번호와 주소를 얻을 수 있다.

 

Postcode 컴포넌트를 간단히 설명하자면,

1. onAddressSelect prop을 받아서, Daum 우편번호 검색 팝업을 열어 사용자가 주소를 선택할 수 있게 한다.
2. 주소 선택이 완료되면 onAddressSelect 콜백 함수가 호출되어 선택된 주소를 상위 컴포넌트로 전달한다.
3. button 컴포넌트를 사용해 팝업을 여는 버튼을 렌더링합니다.

 

나는  fullAdress만 필요했기 때문에, onAddressSelect prop을 만들어서 fullAddress를 전달하였다.

handleComplete 함수에서 주소 검색이 완료되면 onAddressSelect 콜백 함수를 호출하여 fullAddress를 전달하는 로직이다.

 

📖 느낀점

 

React와 Daum 우편번호 서비스를 사용하여 주소 검색 기능을 구현하는 방법을 알아보았다.

api를 처음 사용해봤는데, 이런 api들을 사용하면 멋진 기능들을 구현할 수 있다는걸 알게되었다.

또한, 고수분들이 올리신 npm 라이브러리를 이용하면 좋은 기능을 더 쉽게 구현할 수 있다는것도 깨달았다.

다양한 api들을 이용하여 앞으로 구현하고 싶은 기능들이 많이 생겼다.

코딩이 더욱 재밌어질 것 같다. 😉