본문으로 건너뛰기

Hook을 이용하여 Kakao 지도 API 불러오기

동기적으로 Kakao Map API를 불러오고 싶거나, Script 태그를 삽입 하기 힘든 경우 useKakaoLoader hook를 이용하여 사용할 수 있습니다.

해당 Hook를 사용시 react-kakao-maps-sdk 라이브러리 내부에서 Loader 를 통한 loading 상태를 관찰하고 있기 때문에 렌더링 이후 hook를 통한 Kakao 지도 API를 불러오더라도 자동으로 리렌더링이 가능합니다. 이를 통해 [CLS](https://web.dev/cls/)를 방지할 수 있습니다.

해당 hook를 사용이후 전역에 설치가 되고 이후 재호출(동일한 옵션)이 일어나더라도 재설치 되거나, 제거되지 않습니다.

function(){
const [ loading, error ] = useKakaoLoader({
appkey: "...", // 발급 받은 APPKEY
...options // 추가 옵션
})

return (
// Map 내부에서 loading 상태를 관찰하고 있기 때문에 conditional rendering를 하지 않아도 됩니다.
<Map // 지도를 표시할 Container
center={{
// 지도의 중심좌표
lat: 33.450701,
lng: 126.570667,
}}
style={{
// 지도의 크기
width: "100%",
height: "450px",
}}
level={3} // 지도의 확대 레벨
/>
);
}