[카카오 주소 API] TypeScript에서 카카오(다음) 주소 API 사용 방법

 

 

카카오 주소 API의 경우 별도의 Key 없이 바로 외부 스크립트를 cdn 등의 방법으로 바로 사용이 가능하다.

 

 

---

1. Script 불러오기

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" />

/* 
   NextJS
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" async />
*/

 

 

 

 

---

2. Interface 선언

타입스크립트는 컴파일 언어이기 때문에, IDE에서 바로 오류를 감지한다. 그렇기 때문에 외부 객체는 타입을 알 수 없기 때문에 바로 참조할 수가 없고 Interface를 선언해 주어야 한다.

declare global {
  interface Window {
    daum: any;
  }
}

interface IAddr {
  address: string;
  zonecode: string;
}

• 위와 같이 window에 daum 객체가 있다고 명시해 준다.
• 주소 입력 후 반환받기 위한 Paramiter도 interface 선언해 준다.

 

 

---

3. 클릭 이벤트 선언

  const onClickAddr = () => {
    new window.daum.Postcode({
      oncomplete: function (data: IAddr) {
        (document.getElementById("addr") as HTMLInputElement).value =
          data.address;
        (document.getElementById("zipNo") as HTMLInputElement).value =
          data.zonecode;
        document.getElementById("addrDetail")?.focus();
      },
    }).open();
  };

 

 

 

---

4. 전체 소스 코드

declare global {
  interface Window {
    daum: any;
  }
}

interface IAddr {
  address: string;
  zonecode: string;
}

export default function Addr() {
  const onClickAddr = () => {
    new window.daum.Postcode({
      oncomplete: function (data: IAddr) {
        (document.getElementById("addr") as HTMLInputElement).value =
          data.address;
        (document.getElementById("zipNo") as HTMLInputElement).value =
          data.zonecode;
        document.getElementById("addrDetail")?.focus();
      },
    }).open();
  };

  return (
        <input
          id="addr"
          type="text"
          readOnly
          onClick={onClickAddr}
        />
        <button onClick={onClickAddr}>검색</button>
        <input
          id="zipNo"
          type="text"
          readOnly
        />
        <input
          id="addrDetail"
          type="text"
        />
  );
}