[React] 카카오 우편번호 서비스 API (react-daum-postcode)로 주소 입력받기

사이드 프로젝트 중, 주소 찾기를 구현해야 해서 찾아보니까 카카오 우편번호 서비스 API가 있었다.

 

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

Daum 우편번호 서비스

 

위의 사이트로 들어가보면 자세하게 guide가 나와있다.

직접 API를 연동하는 대신, react-daum-postcode라는 라이브러리를 이용해서 편하게 구현했다.

https://www.npmjs.com/package/react-daum-postcode

react-daum-postcode

 

 

 

 

 

 

1. 설치

 

npm install react-daum-postcode // npm
yarn add react-daum-postcode // yarn

 

각자 사용하는 대로 설치하면 되고 나는 npm으로 설치했다.

 

 

 

2. 적용해보기

 

// 간단한 예시
import DaumPostcode from 'react-daum-postcode';

const addressInput = () => {
  return (
    <div>
      <DaumPostcode />
    </div>
  );
}

 

import 해준 뒤에 적용해주면 화면에 바로 우리가 흔히 아는 주소찾기 화면이 나온다.

 

이걸 응용해서 원하는 곳에 적용하면 된다.

 

 

 

 

3. 내가 실제로 적용한 예시

 

우선 나는 흔히 보는 것처럼, input 옆에 '주소 검색' 버튼을 누르면 나오도록 하고 싶었다.

그래서 input처럼 보이지만 나중에 주소를 선택한 뒤 자동으로 입력받을 div를 만들고,

아래에도 하나 더 만들었다. (우편 번호용, 주소용)

그리고 자세한 주소는 input으로 입력받기 위해 input 태그까지 추가하였다.

 

 

그리고 상태관리를 해줘야 하는데 총 4가지가 필요했다.

• 우편 번호
• 주소
• 자세한 주소
• 모달창 open 여부

 

  const [zonecode, setZonecode] = useState('');
  const [address, setAddress] = useState('');
  const [detailAddress, setDetailAddress] = useState('');
  const [isOpen, setIsOpen] = useState(false);

 

이렇게 useState를 사용해서 상태 관리 코드를 추가했다. 

 

DaumPostcode를 사용하려면 아래 prop에 대해 알아야 하므로 간단히 정리해본다.

theme

• 다음 우편번호 서비스 화면의 색상 테마를 변경하는 props

빈 문자열일 경우 기본 테마를 따른다. 나는 theme를 사용하지 않을거라 생략했다.

const themeObj = {
   bgColor: "", 			// 바탕 배경색
   searchBgColor: "", 		// 검색창 배경색
   contentBgColor: "", 		// 본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
   pageBgColor: "", 		// 페이지 배경색
   textColor: "", 			// 기본 글자색
   queryTextColor: "", 		// 검색창 글자색
   postcodeTextColor: "", 	// 우편번호 글자색
   emphTextColor: "", 		// 강조 글자색
   outlineColor: "" 		// 테두리
};

 

style

• 우편번호 검색창을 감싸는 최상위 엘리번트 스타일(CSS)를 지정하는 props

 

기존 스타일은

const style = { width:"100%", height:400 }; // default

 

이렇게 default로 지정되어있는데 수정하고 싶으면 수정해도 된다.

나는 간단하게 width와 height만 지정해주었다.

 

  const postCodeStyle = {
    width: '400px',
    height: '480px',
  };

 

 

onComplete

• 우편 번호 검색 결과 목록에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수를 정의하는 props
• onComplete을 정의하지 않으면 아무일도 일어나지 않으므로 반드시 지정해줘야 한다.
• data : 사용자가 선택한 주소 정보를 담고 있는 객체
• onComplete 함수는 data를 입력으로 받는 함수이다.

const completeHandler = (data) => {
  console.log(data);
}

 

콘솔로 이 data를 찍어보면

코엑스 검색하고 랜덤 선택한 data

 

이런 식으로 많은 data가 찍히는데 이 중 address와 zonecode만 사용하면 되니까 두 가지를 객체로 엮어주었다.

  const completeHandler = (data: AddressData) => {
    const { zonecode, address } = data;
    setZonecode(zonecode);
    setAddress(address);
  };

 

 

onClose

검색 결과를 선택하거나 닫기 버튼으로 닫았을 때 발생하는 콜백함수를 정의하는 props

• FORCE_CLOSE
  • 사용자가 브라우저 닫기 버튼을 통해 팝업창을 닫은 상태
• COMPLETE_CLOSE
  • 사용자가 검색결과를 선택하여 팝업창이 닫힌 상태
  • oncomplete 콜백 함수가 실행 완료된 후에 onclose 실행

나는 그냥 open 여부를 간단히 넣어주었다.

  const closeHandler = () => {
    setIsOpen(false);
  };

 

 

 

 

 

아래 코드처럼 zonecode와 address value를 넣어주면 주소 선택시 자동으로 div가 채워진다.

      <div className="flex flex-col">
        <div className="flex">
          <div
            className="appearance-none border rounded-l py-2 px-3 text-gray-700 leading-tight placeholder:text-sm focus:outline-none focus:shadow-outline w-full"
            onClick={toggleHandler}
          >
            {zonecode}
          </div>
          <button
            type="button"
            onClick={toggleHandler}
            className="bg-[#5EC7B8] hover:bg-[#2E9093] text-white text-sm rounded min-w-[140px] px-4 py-2 ml-4 focus:outline-none focus:shadow-outline"
          >
            우편번호 검색
          </button>
        </div>
        <div className="appearance-none border h-[35px] rounded-l mt-4 py-2 px-3 text-gray-700 leading-tight mb-4 placeholder:text-sm focus:outline-none focus:shadow-outline">
          {address}
        </div>
      </div>
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div
            className="fixed inset-0 bg-gray-500 bg-opacity-50 backdrop-blur"
            onClick={closeHandler}
          ></div>
          <DaumPostcode
            style={postCodeStyle}
            onComplete={completeHandler}
            onClose={closeHandler}
          />
        </div>
      )}

 

주소 검색

 

이런 식으로 주소를 검색하여 클리갛면, 해당 주소가 자연스럽게 들어가는 걸 알 수있다.

상세 주소는 본인이 입력하도록 하면 끝!

 

 

 

 

 

 

 

 

---

https://daydream-sy.tistory.com/312

[Error] Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

이런 오류도 생겨서 시간은 걸렸지만,

라이브러리를 사용해서 좀 더 쉽게 구현할 수 있어서 좋았다.

막상 적용하고 나니 다른 프로젝트에서도 필요할 때마다 적용할 수 있을 것 같아서 블로그에도 기록해본다.