카카오나 네이버 지도를 사용할 때
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>이런식으로 지도를 그려야 한다고 가이드에 작성이 되어있다.
하지만 React에서 지도를 작성할 때
위와 같은 가이드로 작성을 하게 되면
이렇게 밑줄이 쳐지게 된다.
에러메세지가 이렇게 뜨는 걸 확인할 수 있다.
해결방법
const { kakao } = window;다음과 같이 window에서 kakao 객체를 불러와야지 사용할 수 있다.
이유는?
JavaScript에서 전역 객체인 window를 통해 외부 라이브러리를 사용하기 때문이다.
일반적으로 React 애플리케이션에서 외부 라이브러리를 사용할 때는 npm을 통해 패키지를 설치하고 import 문을 사용하여 해당 라이브러리를 불러온다.
window 객체는 전역 객체로써 브라우저 환경에서 사용되며, 외부 스크립트 파일을 포함하는 용도로도 사용한다. window 객체의 kakao나 naver와 같은 속성을 사용하여 해당 스크립트 파일에서 불러온 라이브러리나 객체를 접근할 수 있다. 이렇게 함으로써 카카오 지도 API에서 제공하는 기능들을 kakao 변수를 통해 React 컴포넌트에서 사용할 수 있다.
