문제점_1 (객체 참조)
kakao map api를 사용하기 위해서는 두개의 코드 작성이 필수적으로 필요하다.
- 실제 지도를 그리는 Javascript API를 불러오는 코드
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>- 지도를 띄우는 코드
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴kakao에서는 다음과 같이 예시를 보여준다.
<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>
하지만 나는 html파일과 typescript파일이 별도로 존재해서 1번 코드를 html파일에, 2번 코드는 ts파일에 작성해야한다. 그러면 무슨 문제가 생기느냐.
바로바로 2번 코드에 new kakao.maps.LatLng에 있는 kakao를 인식하지 못하고 'kakao' 이름을 찾을 수 없습니다.라는 경고문이 나온다.
해결방법
위의 문제를 해결하는 방법은 kakao객체를 불러오는 것이다. 다음과 같이 말이다.
const kakao = (window as any).kakao;const kakao = (window as any).kakao;를 쉽게 이해할 수 있도록 설명해보자면
1.window
window은 웹 브라우저에서 전역 객체로, 브라우저 창에 관한 정보와 로드된 문서에 대한 정보를 나타낸다. 즉, 브라우저 창 전체를 대표하는 객체이다.
2.as any
as any는 TypeScript 구문으로, 오른쪽 표현식을 any 타입으로 취급하라는 것이다. (window as any) 사용은 TypeScript가 window의 구체적인 타입에 대해 걱정하지 않도록 하는 것이다. 이는 kakao 객체가 TypeScript에서 기본적으로 인식되지 않을 수 있으며, any를 사용하여 window에서 kakao 속성에 접근할 수 있도록 하는 것이다.
정리해보자면 전역 window 객체에서 kakao 객체를 가져오려고 하는 것이다.
문제점_2 (react life cycle)
위의 오류는 참조할 내용이 null로 나오기 때문에 발생하는 오류라고 한다.
해결방법
위의 문제를 해결하기 위해서는 react에 존재하는 생명주기(life cycle)이라는 것을 알아야한다. 자세한 내용은 다른 글에서 알아보기로 하고 간단하게 설명하면 리액트 함수형 컴포넌트는 생성-업데이트-소멸의 단계로 흘러가고 이는 react-hook이라는 것에 의해 차례대로 흘러간다는 것이다.
그리고 위의 문제를 해결하기 위해서는 컴포넌트가 생성(mount) 된 이후에 업데이트 단계에서 실행되는 useEffect를 사용하면 문제를 해결할 수 있다.
useEffect(()=>{
const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스 호출에서 지정
const options = {
//지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(
37.55699327194725,
126.97267350572926
), //지도의 중심좌표
level: 10, //지도의 레벨(확대, 축소 정도)
};
const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
},[])위와 같이 코드를 구현하면 컴포넌트에 DOM트리가 완성된 이후에 실행되기 때문에 #map에 대한 부분을 참조할 수 있게된다.
