[REACT] react-daum-postcode를 이용하여 우편번호 검색 구현하기

 

 

카카오에서 제공하는 우편번호 서비스 를

리액트환경에서 조금 더 간편하게 이용할수 있는 라이브러리가 있어서 사용해봤다 ㅎ!

 

npm i react-daum-postcode

 

임베드 해서 사용하는 방법 과 팝업 방식으로 사용하는 방법이 있고, 나는 팝업 방식으로 구현해보았다.

 

✅ 전체 코드

import React, { useState } from "react";
import styled from "styled-components";
import { useDaumPostcodePopup } from "react-daum-postcode";
import { postcodeScriptUrl } from "react-daum-postcode/lib/loadPostcode";

const PostCode = () => {
  const open = useDaumPostcodePopup(postcodeScriptUrl);

  const [address, setAddress] = useState("");
  const [detailAddress, setDetailAddress] = useState("");
  const [extraAddress, setExtraAddress] = useState("");
  const [zonecode, setZonecode] = useState("");

  const handleComplete = (data: {
    address: any;
    addressType: string;
    bname: React.SetStateAction<string>;
    buildingName: string;
    zonecode: string;
  }) => {
    let fullAddress = data.address;

    if (data.addressType === "R") {
      if (data.bname !== "") {
        fullAddress += " " + data.bname;
      }
      if (data.buildingName !== "") {
        fullAddress += " " + data.buildingName;
      }
    }

    setAddress(fullAddress);
    setExtraAddress(data.bname);
    setDetailAddress("");
    setZonecode(data.zonecode);
  };

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

  return (
    <Input>
      <div className="row">
        <div className="col">
          <input placeholder="우편번호" value={zonecode} readOnly />
          <input
            type="button"
            defaultValue="우편번호 찾기"
            onClick={handleClick}
            style={{
              border: "2px solid black",
            }}
            readOnly
          />
        </div>
      </div>
      <input
        placeholder="주소"
        defaultValue={address}
        style={{ width: "130%" }}
        readOnly
      />
      <input
        placeholder="상세주소"
        defaultValue={detailAddress}
        onChange={(e) => setDetailAddress(e.target.value)}
        style={{ width: "100%" }}
      />
    </Input>
  );
};

const Input = styled.div`
  input {
    margin: 5px 5px 5px;
    padding: 5px 5px 5px;
    font-size: 28px;
    border-radius: 5px;
  }
`;

export default PostCode;

 

정말 간단하게 완-성 ㅎ-😋