[React] react-daum-postcode 우편번호, 주소 검색

 

 

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

Daum 우편번호 서비스

 

 

우편 번호로 주소를 찾아야 할 때 자주 보이는 다음 우편번호 서비스 API를 사용하는 법! 

리액트에서 쓸 수 있는 react-daum-postcode 패키지를 사용할 것이다. 

 

1. 설치 

npm

npm install react-daum-postcode

yarn

yarn add react-daum-postcode

 

 

먼저 패키지 다운 받고 

잘 받아졌는지 확인 

 

2. 사용

import DaumPostcode from 'react-daum-postcode';

const addressInput = () => {

    const completeHandler = (data:any) =>{
        console.log("주소데이터", data);
    }
    
    return(
        <div>
            <DaumPostcode 
                onComplete={completeHandler}
            />
        </div>
    );
}

 

이런식으로 <DaumPostcode> 로 사용하면 된다

onComplete는 DaumPostcode API를 사용할 때 사용자가 선택한 정보를 받아올 callback함수라서 반드시 사용되어야 할 필수 기능이라 추가해줘야한다.

주소 검색을 아무거나 하고 상세주소를 클릭해보자

그리고 개발자 도구에서 콘솔로그 찍힌거 보면 내가 검색해서 나온 주소의 결과 데이터들이 어마무시하게 많다.

여기서 나는 필요한게 주소 address/roadAddress랑 우편번호인 zoneCode 였다.

이제 이 값들이 필요하니깐 state 처리 해서 화면에 나오게 하면 된다

 

import DaumPostcode from 'react-daum-postcode';

const addressInput = () => {
	//추가추가
  const [zipCode, setZipCode] = useState<string>("");
  const [roadAddress, setRoadAddress] = useState<string>("");

    const completeHandler = (data:any) =>{
        console.log("주소데이터", data)
      	setZipCode(data.zonecode); 
      	setRoadAddress(data.roadAddress);
    }
    
    return(
        <div>
       	    <p>
                우편번호 : {zipCode} 
            </p>
            <p>
                주소 : {roadAddress} 
            </p>
            <DaumPostcode 
                onComplete={completeHandler}
            />
        </div>
    );
}

 

 

여기서 나는 우편번호검색이 우편검색 버튼을 클릭했을때만 모달처럼 띄우고 싶었다. 

혹시나 이 코드 참고한다면 css는 tailwindcss로 작성되어 있다! tailwind css 쓰지 않는다면 style 꼭 바꾸시길..! 

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

export default function App() {
  const [openPostcode, setOpenPostcode] = useState(false);
  const [zipCode, setZipCode] = useState<string>("");
  const [roadAddress, setRoadAddress] = useState<string>("");

  const handle = {
    clickButton: () => {
      console.log("모달창열기");
      setOpenPostcode((current) => !current);
    },
    selectAddress: (data: any) => {
      console.log("주소데이터", data);
      setZipCode(data.zonecode);
      setRoadAddress(data.roadAddress);
      setOpenPostcode(false);
    },
  };

  return (
    <div className="App">
      <div>
        <p>우편번호 : {zipCode}</p>
        <p>주소 : {roadAddress}</p>
        <button
          type="button"
          onClick={handle.clickButton}
          className="border h-8"
        >
          우편번호 검색
        </button>
        {openPostcode && (
          <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 ">
            <div className="bg-white rounded-lg p-8 w-96 shadow-lg relative">
              <button
                className="absolute top-3 right-3 text-gray-500"
                onClick={() => setOpenPostcode(false)}
              >
                ✕
              </button>
              <DaumPostcode
                onComplete={(data) => {
                  handle.selectAddress(data);
                }}
                autoClose={false}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

 

우편번호 검색이라는 버튼을 누르면 뒷 배경이 약간 어둡게 되면서 모달창처럼 나온다! 그리고 주소가 선택되면 모달창이 자동으로 꺼진다

이렇게 되면 다음 우편번호 사용 API 완성 😄