사용이유
카카오 주소 API는 별도의 KEY 없이 바로 외부 스크립트를 cdn 등의 방법으로 바로 사용이 가능
무료 api, 사용량 제한 없음
행정안전부에서 제공하는 “도로명 주소” DB를 직접 업데이트 받고 있기에 가장 최신의 데이터 이용가능
•
위와 같이 window에 daum 객체가 있다고 명시해 준다.
•
주소 입력 후 반환받기 위한 Paramiter도 interface 선언해 준다.
타입스크립트는 컴파일 언어이기 때문에, IDE에서 바로 오류를 감지한다. 그렇기 때문에 외부 객체는 타입을 알 수 없기 때문에 바로 참조할 수가 없고 Interface를 선언해 주어야 한다.
declare를 통해 Window 객체의 타입을 추가 정의할 수 있다.
window 객체 : 웹 브라우저의 창(window)을 나타내는 객
declare global {
interface Window {
daum: any;
}
}
TypeScript
복사
클릭이벤트 선언
•
address : 기본 주소 (ex. 경기 성남시 분당구 판교역로 166)
•
addressType : R(도로명), J(지번)
•
bname : 법정동/ 법정리 이름 (ex. 백현동)
•
buildingName : 건물명
// 우편번호 찾기 모달을 여는 함수
const openPostCode = () => {
new window.daum.Postcode({
oncomplete: function(data: any) {
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); // 주소 상태 업데이트
}
}).open();
};
TypeScript
복사
script 불러오기
// 스크립트 동적 로드
const loadPostCode = () => {
const script = document.createElement('script');
script.src = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
document.head.appendChild(script);
};
TypeScript
복사
// 컴포넌트 마운트 시 스크립트 로드
React.useEffect(() => {
loadPostCode();
}, []);
TypeScript
복사
"use client";
import React, {useState} from 'react'
declare global {
interface Window {
daum: any;
}
}
const Address = () => {
const [address, setAddress] = useState('');
const [detailAddress, setDetailAddress] = useState('');
// 우편번호 찾기 모달을 여는 함수
const openPostCode = () => {
new window.daum.Postcode({
oncomplete: function(data: any) {
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); // 주소 상태 업데이트
}
}).open();
};
// 스크립트 동적 로드
const loadPostCode = () => {
const script = document.createElement('script');
script.src = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
document.head.appendChild(script);
};
// 컴포넌트 마운트 시 스크립트 로드
React.useEffect(() => {
loadPostCode();
}, []);
return (
<div className='my-1'>
<div className="flex items-center space-x-2 my-2">
<p>위치</p>
<div className="flex items-center space-x-2">
<div className="flex items-center">
<input
className="form-input px-3 py-2 border rounded mr-2 max-w-xs"
type="text"
value={address}
onChange={(e) => setAddress(e.target.value)}
placeholder="주소"
/>
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700" onClick={openPostCode}>주소 검색</button>
</div>
</div>
</div>
<input
className="form-input px-3 py-2 border rounded mr-2 max-w-xs"
type="text"
value={detailAddress}
onChange={(e) => setDetailAddress(e.target.value)}
placeholder="상세 주소"
/>
</div>
)
}
export default Address
TypeScript
복사