react daum postcode service api 우편번호 찾기+위경도 데이터 받아오기 컴포넌트로 분리

우리 서비스의 주소찾기 기능은 주소 + 위/경도 정보도 함께 받아와야 한다.  

주소찾기는 daum에서 제공하는 무료 우편번호 검색 서비스 api를 사용했고, 위/경도 정보는 카카오에서 제공하는 무료 로컬 API 를 사용해서 구현했다. 

 

다음 우편번호 검색 api는 쌩 js로 구현되어있다. 이를 react 환경에서 구현하기 위해서 react-daum-postcode 오픈소스 패키지를 활용하여 개발하였다. 

 

 

리액트 페이지에서 pop up 형태로 우편번호 찾기 api를 띄우려면 우선 아래의 코드가 필요하다.

아래 두 개 파일 코드만 있으면 우편번호 검색 서비스를 팝업으로 띄울 수 있어 해당 패키지를 npm install로 따로 설치하진 않고 프로젝트 내부에 파일로 추가해주었다. 

 

loadPostcode.ts

Daum 우편번호 서비스를 이용하기 위해 띄우는 우편번호 검색 팝업창 script를 호출하는 함수가 정의된 파일

 

useDaumPostcodePopup.tsx

우편번호 검색 팝업창을 띄우고싶은 페이지에서 loadPostcode 함수를 실행하여 반환받은 함수로 우편번호 검색 서비스를 팝업으로 띄우는 커스텀 훅

 

이제 위에서 추가한 `useDaumPostcodePopup` hook을 가지고 오면 팝업을 띄울 수가 있다. 

아래 PostCode 파일은 react-daum-postcode 패키지에서 명시해준 대표적인 사용법 예시로, 우편번호 찾기가 필요한 페이지에서 이 예제와같은 컴포넌트를 만들어 사용하면 된다. 

 

PostCode.tsx

import React from 'react';
import { useDaumPostcodePopup } from 'react-daum-postcode';

const Postcode = () => {
  const open = useDaumPostcodePopup(scriptUrl);

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

    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };

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

  return (
    <button type='button' onClick={handleClick}>
      Open
    </button>
  );
};

 

 

나의 경우는 우편번호 검색이 끝났을 때 사용자가 선택한 주소를 받아올 콜백함수인 `onComplete`의 결과값을 이 PostCode.tsx 파일이 아닌, 상위 컴포넌트에서 받아야했다. 그래야 이 주소찾기 버튼을 여기저기 활용할 수 있기때문에! 

 

목표 

PoseCode.tsx 에서는 우편번호 찾기 버튼을 두고, 버튼을 눌러 우편번호 검색 서비스를 팝업으로 띄우고 사용자가 선택한 정보를 받아오는 콜백함수만 실행하게한다.

사용자가 선택한 주소 데이터는 그 상위의 컴포넌트에서 관리하게 한다.

상위 컴포넌트에서는 주소 데이터를 가지고 위/경도 api를 호출해서 위/경도 정보도 함께 받아온다.

또 그 상위 컴포넌트에서 주소데이터 + 위/경도 데이터를 가지고 ui에 필요한 상태값을 관리한다.

 

 

PostCode.tsx 

import { Address } from '@/components/daum-postcode/loadPostcode';
import useDaumPostcodePopup from '@/components/daum-postcode/UseDaumPostcodePopup';

interface Props {
  onHandleComplete: (data: Address) => void;
}

export const PostCode = ({ onHandleComplete }: Props) => {
  const open = useDaumPostcodePopup();

  const handleSearchAddress = () => {
    open({ onComplete: onHandleComplete }).catch(() =>
      alert('현재 다음 우편번호 서비스를 이용할 수 없습니다.'),
    );
  };

  return (
    <Button
      onClick={handleSearchAddress}>
      주소 찾기
    </Button>
  );
};

 

 

SearchAddressWithLatiLongitude.tsx

import { Address } from '@/components/daum-postcode/LoadPostcode';
import { PostCode } from '@/components/daum-postcode/PostCode';
import { useLazyGetXYCoordinatesQuery } from '@/stores/apis/KakaoLocalApi';
import { Location } from '@/stores/apis/SiteApi';

interface Props {
  onChangeAddress: (val: Location) => void;
}
export const SearchAddressWithLatiLongitude = ({ onChangeAddress }: Props) => {
  const [getXYCoordinates] = useLazyGetXYCoordinatesQuery(); //kakao 위/경도 데이터를 호출하는 쿼리

  const handleComplete = (data: Address) => {
    const address = data.address;

    getXYCoordinates(address)
      .then(({ data }) => {
        if (data) {
          onChangeAddress({
            address,
            detailAddress: data.documents[0].road_address.building_name,
            zipCode: data.documents[0].road_address.zone_no,
            latitude: data.documents[0].y,
            longitude: data.documents[0].x,
          });
        }
      })
      .catch((err) => alert('카카오 위/경도 데이터를 불러올 수 없습니다.'));
  };

  return <PostCode onHandleComplete={handleComplete} />;
};

 

 

주소데이터 + 위/경도 데이터가 필요한 상위 컴포넌트

const initialLocation = {
    address: '',
    detailAddress: '',
    zipCode: '',
    latitude: '',
    longitude: '',
  };

  const [areaItemLocation, setAreaItemLocation] = useState<Location>(
    type === 'edit' ? props.areaData.location : initialLocation,
  );

		<SearchAddressWithLatiLongitude
            onChangeAddress={(val) => setAreaItemLocation(val)}
          />

 

 

결과

이로써 주소찾기 버튼이 있는 PostCode 컴포넌트는 주소 찾기 비즈니스 로직에만 초점을 맞추어 관심사를 분리할 수가 있었다. 주소찾기 버튼을 여기저기 재사용하여 여러 페이지에서 중복된 로직없이 주소찾기 기능을 구현할 수 있어 더 깔끔한 코드가 되었고 유지보수할때도 해당 수정하고 싶은 로직이 있는 파일만 수정하면 되므로 변경과 확장에 좀 더 유연하게 대응할 수 있도록 개선되었다!

 

 

참고

 

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

Daum 우편번호 서비스

 

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

react-daum-postcode

https://developers.kakao.com/docs/latest/ko/local/dev-guide#address-coord

Kakao Developers