1. 우편번호검색
우편번호 검색을 위한 라이브러리
사용법
1. index.html 파일에 스크립트 태그 추가
<body>
<div id='root'></div>
<script src='https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'></script>
<script type='module' src='./src/main.tsx'></script>
</body>위와 같이 스크립트를 로드하게 되면, Daum의 우편번호 서비스 API를 로드하는 스크립트 태그는 CDN (Content Delivery Network)에서 JavaScript 파일을 가져와서 작동하게 된다.
즉, src에서 지정한 URL은 Daum의 CDN에서 호스팅되는 파일을 가리킨다.
브라우저는 이 스크립트 태그를 만나면 지정된 URL로 요청을 보내고, 성공하게되면 다음의 우편번호 서비스 API 코드가 포함된 JavaScript파일을 다운로드하고, 브라우저 환경에서 실행된다.
이를 통해 웹페이지는 주소 검색 등의 API에서 제공하는 기능을 활요할 수 있다.
2. React&TypeScript 에서 사용하기(타입 지정)
문서에서 제공하는 간편 사용법을 보면 아래와 같이 되어있다.
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>그런데 TypeScript에서는 new daum.Postcode() 객체의 타입을 알 수 없기 때문에, 별도의 파일을 만들어서 Type을 알 수 있도록 한다.
아래와 같이 daum.postcode.d.ts 파일을 만들고, daum이라는 네임스페이스를 등록한다.
// daum.postcode.d.ts
declare namespace daum {
export type PostcodeResult = {
address: string;
zonecode: string;
};
export class Postcode {
constructor({
oncomplete,
width,
height,
}: {
oncomplete: (data: PostcodeResult) => void;
width: string;
height: string;
});
embed(element: HTMLElement | null);
}
}3. 우편번호 검색을 위한 컴포넌트 만들기
검색을 위한 컴포넌트 AddressSearch를 생성한다.(컴포넌트 명은 자유)
export default function AddressSearch({
close,
changeAddress,
}: AddressSearchProps) {
const refElement = useRef<HTMLDivElement>(null);
useEffectOnce(() => {
new daum.Postcode({
oncomplete(data) {
const { address, zonecode: postalCode } = data;
changeAddress({ address, postalCode });
close();
},
width: '100%',
height: '100%',
}).embed(refElement.current);
});
return (
<Container id='address-search-container' onClick={close}>
<div ref={refElement} />
</Container>
);
}close: 검색창을 닫는 props로 전달된 함수. 상위 컴포넌트에서 useBoolean 의 setFalse 함수.
changeAddress: Form 데이터의 value 값을 변경하는 사용자 정의 이벤트 함수
useRef<HTMLDivElement>(null) 는 div 태그 자체를 ref
상위 컴포넌트의 코드는 아래와 같은 형태가 된다.
export default function ~Component() {
const {
value: searching,
setTrue: openSearch,
setFalse: closeSearch,
} = useBoolean();
// …(중략)…
const handleClickSearchPostalCode = () => {
openSearch();
};
return (
// ...
{searching && (
<AddressSearch
close={closeSearch}
changeAddress={handleChangeAddress1}
/>
)}
);
}다양한 옵션
문서에서 찾아보면 다양한 요구조건을 충족시킬 수 있도록 옵션을 제공한다. 상황에 맞게 찾아서 사용할 수 있다.
팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기
사용자가 선택한 값 이용하기
iframe을 이용하여 레이어 띄우기
iframe을 이용하여 페이지에 끼워 넣기
주소를 선택하면 지도도 함께 보여주기
Last updated