[React] 주소 검색 & 출력하기 (with 다음 주소 API 라이브러리)

 

내 주소를 입력하는 컴포넌트를 만들기 위해 Daum에서 제공한 우편번호 서비스(이하 다음 주소 API)를 이용해보았다!

구현할 UI - 왼쪽 위 내 주소 입력 부분

📄 다음 주소 API 공식문서

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

Daum 우편번호 서비스

이 API는 대부분의 사이트에서도 이용하고 있다.

javascript로 사용 시 위의 공식 문서의 예제 등을 통해 쉽게 사용 가능하다.

 

하지만 나는 리액트 환경이기 때문에

리액트에서 간편하게 이용할 수 있도록 만들어진 라이브러리 react-daum-post를 사용해 쉽게 컴포넌트를 완성할 수 있었다 ㅎ.ㅎ

🔗 react-daum-post 라이브러리 깃허브

https://github.com/kmsbernard/react-daum-postcode?tab=readme-ov-file

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

깃허브 리드미에 친절하게 설치 방법, 임베드 버전, 팝업 버전 예제 코드가 나와 있다!

⚒️ 설치

npm install react-daum-postcode

돋보기, 마커 아이콘을 사용하기 위해 react-icons도 추가로 설치하였다.

npm install react-icons

💖 사용하기 

1. 주소 입력창 만들기

tailwindcss와 react-icons를 활용하여 간단한 주소창을 만들었다.

 

결과물

2. 버튼 클릭 시 주소 입력 팝업창 열고 주소 출력하기

1. address를 useState를 사용하여 빈 문자열로 초기화하였다.

2. 주소 입력 창을 클릭하면 handleClick 함수 호출하여 팝업창을 연다.

3. 우편번호 검색이 끝났을 때 사용자가 선택한 정보를 받아올 onComplete 콜백함수로 handleComplete 함수를 호출하여 받아온 도로명주소(fullAddress)를 address에 설정한다.

4. address가 null이 아니면 div에 넣어 화면에 출력한다.

전체 코드

import React, { useState } from "react";
import { useDaumPostcodePopup } from "react-daum-postcode";
import { FaMapMarkerAlt } from "react-icons/fa";
import { IoSearchSharp } from "react-icons/io5";

export default function AddressInput() {
  const [address, setAddress] = useState("");
  const open = useDaumPostcodePopup();

  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})` : "";
    }

    setAddress(fullAddress);
  };

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

  return (
    <div className="h-auto bg-stone-200">
      <div className="flex-col content-center items-center p-5">
        <div
          className="flex justify-between bg-white py-3 hover:cursor-text"
          onClick={handleClick}
        >
          <p className="mx-5 text-lg text-stone-300">내 주소 입력</p>
          <IoSearchSharp
            color="lightgray"
            size={30}
            className="mx-5 hover:cursor-pointer"
          />
        </div>
        <>
          {address === "" ? (
            <></>
          ) : (
            <div className="mt-5 flex items-center gap-3 text-xl font-bold text-black">
              <FaMapMarkerAlt size={25} />
              <p>{address}</p>
            </div>
          )}
        </>
      </div>
    </div>
  );
}

 

🖼️ 결과물

 

간편히 사용할 수 있어 좋았다. 👍🏻 👍🏻 👍🏻 👍🏻

 

👩🏻‍💻 추가로 할 것

+ 이제 API 키를 발급해보고 입력한 주소를 지도에 띄우기를 진행할 것이다.

+ 프로젝트가 어느 정도 마무리 되면 라이브러리 말고도 공식 문서를 보고 응용해보기도 해야겠다.