[REACT] 외부 API 받아오기(with typescript) -declare

카카오맵 API를 react에서 작업할 때 

typescript를 template으로 사용하고 있다면,

index.html에 API를 추가해도  kakao 객체의 존재 여부를 typescript에서 인식하지 못한다.

 

-- 아래는 해당 에러이다.

 

이 경우에 typescript에게 kakao 라는 객체가 window에 존재하고 있다고 인식시켜줘야 하는데,

그럴 때 사용하는 typescript 문법이 declare이다.

import React, { useEffect } from "react";
import "./App.css";

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

function App() {
  useEffect(() => {
    var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
    var options = {
      //지도를 생성할 때 필요한 기본 옵션
      center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
      level: 3, //지도의 레벨(확대, 축소 정도)
    };

    var map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
    return () => {};
  }, []);

  return (
    <div className="App">
      <div id="map" style={{ width: 300, height: 300 }}></div>
    </div>
  );
}

export default App;

또한, kakao 객체가 window 하위 객체라는 것을 정의해야 하므로 window.kakao[~~] 로 변경한다.

declare 문법은 계속 공부하면서 효용을 더 찾아보는걸로...