[React] react-daum-postcode(다음 우편번호 검색 서비스 /typescript)

이번 프로젝트에서 주소와 우편번호를 입력해야 할 일이 생겼다.
배송지를 입력하는 과정에서 들어가야 하는 기능으로 검색을 해보니 카카오에서 제공해주는 우편번호 서비스 예제 코드를 직접 이용하는 방법과, react-daum-postcode 라이브러리를 이용하는 방법 2가지가 있었다.

카카오 우편번호 서비스는 이곳에 아주 자세하게 나와있다.
https://postcode.map.daum.net/guide#sample

Daum 우편번호 서비스

두가지를 비교해보던 중 라이브러리의 코드가 더 복잡하지 않을 것으로 보여 라이브러리를 이용하기로 했다.

 

구현 완료된 화면은 아래와 같다.(CSS는 아직 손볼 곳이 많지만....)

먼저 나는 npm을 이용하기 때문에 npm install react-daum-postcode를 이용해서 라이브러리를 설치했다.

코드는 npm에 나와있는 코드를 참고했다.

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

const MyInfo = () => {

  const [change, setChange] = useState<boolean>(false);
  const [isOpenPost, setIsOpenPost] = useState<boolean>(false);
  const [addressCode, setAddressCode] = useState<string>('');
  const [address, setAddress] = useState<string>('');

  const onChangeOpenPost = () => {
    setIsOpenPost(!isOpenPost);
  };

  const onCompletePost = (data:any) => {
    let fullAddr = data.address;
    let extraAddr = '';

    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddr += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddr += extraAddr !== '' ? `, ${data.buildingName}` : data.buildingName;
      }
      fullAddr += extraAddr !== '' ? ` (${extraAddr})` : '';
    }

    setAddressCode(data.zonecode); // 우편번호 설정
    setAddressDetail(fullAddr); //검색한 주소
    setIsOpenPost(false);
  };


    return (
	...
         <button className="Name" onClick={onChangeOpenPost}>우편번호</button>
         {isOpenPost ? (
             <S.PostCode>
                <DaumPostcode className="PostCodeStyle" autoClose onComplete={onCompletePost} />
             </S.PostCode>
         ) : null}
	...
    )
}
export default MyInfo;

우편번호 글씨를 누르면 활성화 되는 우편번호 검색창을 이용하여 검색을 한 뒤 autoClose 옵션을 줘서 주소를 선택하면 자동으로 창이 닫히도록 설정했다.

위 코드를 이해하기 위해 data값을 console에 찍어봤다.

addresstype은 "R"형태와 "J"형태가 있는데, 도로명 주소와 지번주소를 의미한다.
그 외에도 주소를 선택하면 다양한 정보를 받아올 수 있는데, 영문 주소와 한글 주소 둘다 조회 가능하며 우편번호,동 이름 등도 따로 조회가 가능하다.

내가 참고한 코드는 검색한 조회된 전체 address값을 출력하되, extraAddr의 변수를 이용해서 동이름과 건물 이름도 함께 나오도록 코드가 구성되어 있다. 

---

라이브러리를 이용해서 구현하는 것은 오랜 시간이 걸리지 않았지만 다양한 주소를 다양한 방식으로 선택해보면서 어떤 data를 받아오는지 확인하는 과정이 재밌었다. 라이브러리를 사용했기 때문에 아무래도 용량 차지가 좀 있을 듯 하니 나중에 카카오 예제 코드를 보고 직접 구현도 해봐야겠다는 생각이 들었다.

---

참고

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

react-daum-postcode