SookDev

01_비동기로 카카오맵 정보 가져오기

필요할때마다 가져오는 방식

우선 API key 를 받고 .env 설정까지 완료했다는 가정하에 시작해보겠다.

카카오 지도 공식문서처럼 javascript API 로 가져오는 방식인 script 에 api 키를 적용할 수 있지만

useEffect 를 이용해 필요할때만 지도를 불러오는 방식으로 성능 최적화를 할 수 있다.


useEffect(() => {
    const script = document.createElement('script')
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_APP_KEY}&autoload=false`
    script.async = true
  }, [])

autoload=false

스크립트 태그를 비동기적으로 호출해서 가져오기 때문에 언제 받아와지는지 모르기 때문에 싱크가 안맞을 수 있으니 그 다음의 로드는 우리가 하겠다 라는 뜻으로, 우리가 직접 제어할 수 있도록 오토 로드를 false 처리 한것.

script.async = true

스크립트를 비동기적으로 가져올것이기 때문에 true 처리를 하고, 렌더링을 방해하지 않겠다. 라는 뜻이다.

렌더링이 끝나고 자바스크립트를 불러올 수 있을때 비동기적으로 호출을 하고 받아온것을 사용하겠다 라고 이해하면 되겠다.

최종코드


const mapContainer = useRef()
  useEffect(() => {
    const script = document.createElement('script')
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_APP_KEY}&autoload=false`
    script.async = true

    document.head.appendChild(script)
    //스크립트를 불러온 시점에 노출을 하겠다. 라고 순서보장을 위해 autoload false 처리
    script.onload = () => {
      window.kakao.maps.load(() => {
        const position = new window.kakao.maps.LatLng(
          location.lat,
          location.lng,
        )
        const options = {
          center: position,
          level: 3,
        }
        const marker = new window.kakao.maps.Marker({
          position,
        })
        const map = new window.kakao.maps.Map(mapContainer.current, options)
        marker.setMap(map)
      })
    }
  }, [location])

...

<div className={cx('wrap-map')}>
	<div className={cx('map')} ref={mapContainer}></div>
		<a
			className={cx('btn-find-way')}
			href={location.link}
			target="_blank"
			rel="noreferrer"
        > 길찾기</a>
	</div>

React에서 카카오맵 사용하기

01_비동기로 카카오맵 정보 가져오기

최종코드