[React] 프로젝트에 카카오맵 넣기

🔍 카카오맵 api

프로젝트에 원하는 위치를 지도를 이용하여 불러오기위해 카카오맵을 사용하기로 하였다.

✏️ API Key발급

카카오맵API를 들어가서 api키를 받아줘야한다.

• 내 애플리케이션추가
  
  앱아이콘을 제외하고 모두 필수입력이다.

• javascript key 복사
  
  나는 cra로 프로젝트를 진행하고있기때문에 javascript키가 필요하다.

• 플랫폼주소 등록
  
  좌측 탭을 보면 플랫폼이라는 탭이 있다. 플랫폼탭을 클릭하여 WEB 플랫폼 주소를 등록해주자.

✏️ React(+typescript) 코드에 적용

declare global {
  interface Window {
    kakao: any
  }
}

export default function Map({ location }: { location: Location }) {
  const mapContainer = useRef(null)
  // 비동기로 불러오기위해 useEffect안에 api를 불러옴
  useEffect(() => {
    // 스크립트불러와줌
    // autoload=false함으로써 자동로드가아닌 내가 원하는시점에 불러와줌(싱크맞추기위함)
    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`
    // 비동기로 불러올거기때문에 async =true(랜더링을 방해하지않음)
    script.async = true
    document.head.appendChild(script)
    script.onload = () => {
      //스크립트를 불러온시점(onload)에 kakao map을 로드
      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)
      })
    }
  }, [])
  return (
    <>
      <div className={cx('wrap-map')}>
        <div className={cx('map')} ref={mapContainer}></div>
        {/* 클릭시 새탭으로 target='_blank' 길상세찾기 링크연결*/}
        <a
          className={cx('btn-find-way')}
          href={location.link}
          target="_blank"
          rel="noreferrer"
        >
          길찾기
        </a>
      </div>
    </>
  )
}

결과

📌코드작성이후 높이값을 지정해주지않으면 ui에 확인할수없으므로 높이값을 꼭지정해주도록하자