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} // 지도의 확대 레벨
    />
  );
}