[React & Next.js] 주소 API 사용법

주소 API 사용법

행정안전부 도로명주소 API가 아닌 Daum 주소 서비스를 이용한 이유

: 행정안전부 도로명주소 API 기능과 똑같이 사용하면서 key값을 발급받지 않아도 되기에 선택하게 되었습니다.

---

영상

 

반응형

---

행정안전부 도로명주소 API

🔗 : 주소기반산업지원서비스

주소기반산업지원서비스

---

Daum 주소 API

🔗 : Daum 우편번호 서비스

Daum 우편번호 서비스

 

설치

npm i react-daum-postcode

 

데이터

data

 

코드

import PostCode from "react-daum-postcode";

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

    const { addressType, bname, buildingName, zonecode } = data;
    
    if (addressType === "R") {
      if (bname !== "") {
        extraAddress += bname;
      }
      if (buildingName !== "") {
        extraAddress += `${extraAddress !== "" && ", "}${buildingName}`;
      }
      fullAddress += `${extraAddress !== "" ? ` ${extraAddress}` : ""}`;
    }
    // 여기서 fulladdress 등 data에서 있는 값을 사용하시면 됩니다.
  };

 

---

실제 적용 코드

// example

import PostCode from "react-daum-postcode";
import { useState } from "react";

export default function Address({
  addrNum,
  setAddrNum,
  addr,
  setAddr,
  detailAddr,
  setDetailAddr,
}) {
  const [showAddrModal, setShowAddrModal] = useState(false);

  const openAddrModal = () => {
    setShowAddrModal(true);
  };

  const closeAddrModal = () => {
    setShowAddrModal(false);
  };

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

    const { addressType, bname, buildingName, zonecode } = data;
    console.log("data", data);

    if (addressType === "R") {
      if (bname !== "") {
        extraAddress += bname;
      }
      if (buildingName !== "") {
        extraAddress += `${extraAddress !== "" && ", "}${buildingName}`;
      }
      fullAddress += `${extraAddress !== "" ? ` ${extraAddress}` : ""}`;
    }
    setAddrNum(zonecode);
    setAddr(fullAddress);

    setShowAddrModal(false);
  };

  const handleDetailAddr = (event) => {
    setDetailAddr(event.target.value);
  };

  return (
    <div>
      <div className="flex flex-row gap-x-3 mb-3">
        <div className="flex flex-row justify-center items-center border-[1px] border-solid border-[#cccccc] rounded-md w-[100px] h-[55px] text-gray-600 pointer-events-none">
          {addrNum}
        </div>
        <button
          onClick={openAddrModal}
          type="button"
          className="bg-gray-300 rounded-md w-fit h-[55px] px-4 py-2 hover:bg-gray-400 active:bg-gray-300"
        >
          주소 찾기
        </button>
        {showAddrModal && (
          <div
            onClick={closeAddrModal}
            className="fixed top-0 left-0 w-full h-full z-[101] bg-[var(--modal-outside-bg)]"
          >
            <PostCode
              onComplete={handleComplete}
              className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bnb_md_xl:max-w-[600px] bnb_sm:max-w-[85%] z-[1000]"
            />
          </div>
        )}
      </div>
      <div className="flex flex-row items-center border-[1px] border-solid border-[#cccccc] rounded-md w-full h-[55px] px-4 text-gray-600">
        {addr}
      </div>
      <input
        onBlur={handleDetailAddr}
        type="text"
        placeholder="상세주소를 입력해주세요."
        className="flex flex-row items-center border-[1px] border-solid border-[#cccccc] rounded-md w-full h-[55px] px-4 text-gray-600 mt-3 placeholder:text-gray-600"
      />
    </div>
  );
}