리액트 다음 우편번호 검색 API 사용하기

https://github.com/kmsbernard/react-daum-postcode

GitHub - kmsbernard/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다.

 

npm i react-daum-postcode   

 

 

라이브러리 설치 후 

 

import { useDaumPostcodePopup } from "react-daum-postcode";

 

import하여 사용하면 된당

 

  const [userFullAddress, setFullAddress] = useState(""); //유저 주소

  const [userZoneCode, setUserZoneCode] = useState(""); //유저 우편번호

 //다음 우편번호 찾기 API사용

  const open = useDaumPostcodePopup(postcodeScriptUrl);

  const handleComplete = (data) => {

    let fullAddress = data.address;

    let extraAddress = "";

    let zonecode = data.zonecode;

    if (data.addressType === "R") {

      if (data.bname !== "") {

        extraAddress += data.bname;

      }

      if (data.buildingName !== "") {

        extraAddress +=

          extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;

      }

      fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";

    }

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

    setUserZoneCode(zonecode);

  };

  const handleClick = () => {

    open({ onComplete: handleComplete });

  };

 

 

 

 

 <button type="button" onClick={handleClick}>

                  우편번호 검색

                </button>

 

 

<input type="text" defaultValue={userZoneCode} required />

          <input

                className="infoInput"

                type="text"

                defaultValue={userFullAddress}

                required

              />

 

 

 

우편번호 검색 클릭하면

 

아래의 검색 창이 팝업으로 뜬다. 그리고 주소를 선택하면 

 

 

 

 

 

자동으로 반영된다.