[React] Postcode API - Daum 우편 번호 찾기 api

회원 정보 수정 페이지 중 다음 우편번호 찾기 api

1. 우편 번호 찾기 api

• 다음 카카오 우편 번호 찾기 api
• 회원가입 시 또는 수정 중에 자주 보게 되는 우편 번호 찾기

2. 설치

yarn add react-daum-postcode

3. 사용

import DaumPostcode from "react-daum-postcode";

4. Code

• React, javascript

const [isAddress, setIsAddress] = useState("");
const [isZoneCode, setIsZoneCode] = useState();

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})` : "";
    }
    setIsZoneCode(data.zonecode);
    setIsAddress(fullAddress);
    setIsPostOpen(false);
  };

• html

<DaumPostcode style={postCodeStyle} onComplete={handleComplete} />

• style 적용

 const postCodeStyle = {
    display: "block",
    position: "absolute",
    top: "50%",
    width: "400px",
    height: "500px",
    padding: "7px",
  };