[React] 다음 주소 API 활용하기

 

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

 

 

 

 

다음 주소 API 활용하기

 

 

다음 주소 API를 활용하여 사용자의 주소 입력 방식을 편리하게 만들 수 있습니다.

 

 

 

 

공식 다음 주소 API 사용설명서

 

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

Daum 우편번호 서비스

 

 

 

 

 

 

 

 

다음 주소 API 활용 특징

 

 

1. API 키를 발급받을 필요가 없습니다.

2. 사용량에 대한 제한이 없습니다.

3. 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다.

4. 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인 가능합니다.

5. 행정안전부에서 제공하는 "도로명 주소" DB를 직접 업데이트 받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니다.

 

하단 로고를 임의로 가릴 경우, 사용에 제약이 발생할 수 있습니다.

 

 

 

 

 

다음 주소 API 활용 방법

 

 

React에서 편리하게 사용하는 방법은 다음 주소 관련 컴포넌트를 만드는 것입니다.

저는 DaumPost.jsx 파일을 만들어 필요한 페이지에서 < DaumPost /> 와 같은 형식으로 임포트하여 사용했습니다.

 

 

공식 문서의 사용 예시

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

 

 

DaumPost.jsx

 

제 프로젝트에서 작성한 코드입니다.

버튼까지 모두 포함하였습니다.

import React from 'react';
import style from './DaumPost.module.css';
import { useDaumPostcodePopup } from 'react-daum-postcode'; // Daum 주소 검색 관련 hook
//주소 api

const DaumPost = ({ setAddress }) => {
    const postcodeScriptUrl = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
    const open = useDaumPostcodePopup(postcodeScriptUrl);

    const handleComplete = (data) => {
        let fullAddress = data.address;
        let extraAddress = '';
        let localAddress = data.sido + ' ' + data.sigungu;

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

        setAddress(fullAddress); // setAddress를 호출하여 부모 컴포넌트의 상태를 업데이트
    };

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

    return <div className={style.find_address_button} type="button" onClick={handleClick}>주소검색</div>;
};

export default DaumPost;

 

 

DaumPost.module.css

 

.find_address_button {
    font-size: 1.2vh;
    color: white;
    background-color: #333;
    /* 버튼의 배경 색상 */
    border: none;
    border-radius: 0.5vh;
    cursor: pointer;
    margin-left: 0.5vw;
    /* 입력 필드와 버튼 사이의 간격 */
    transition: background-color 0.3s;
    width: 10vh;
    height: 4.2vh;
    font-size: 1.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.find_address_button:hover {
    background-color: #5593ff;
    /* 버튼에 마우스를 올렸을 때의 배경 색상 변경 */
}

@media all and (min-width:1024px) and (max-width:1279px) {}

@media all and (min-width:768px) and (max-width:1023px) {}

@media all and (min-width:480px) and (max-width:767px) {}

@media all and (min-width:200px) and (max-width:479px) {}

 

 

 

 

위와 같은 방식으로 다음 주소 API를 활용하여 프로젝트의 완성도를 높일 수 있습니다.