카카오 지도 SDK를 리액트에서 사용하기

kakao map

  <div ref={mapRef} className='w-full md:w-96 aspect-video mt-3'></div>

지도가 들어갈 영역을 만들고 useRef hook을 사용함
(요즘 개인 프로젝트는 죄다 tailwind css를 쓰고 있다. 나 혼자 보는 건데 클래스명이 무한정 길어져도 뭐 어때..)

  const mapRef = useRef<HTMLDivElement | null>(null);

https://github.com/JaeSeoKim/kakao.maps.d.ts

필수는 아니겠지만 타입스크립트 사용을 위해 kakao.maps.d.ts를 설치해주면 편리하다
적용 방법은 해당 페이지의 리드미에 있음

  const initMap = useCallback(() => {
    if (!kakao) return;

    console.log(kakao);
    const container = mapRef.current;

    if (!container) return;

    kakao.maps.load(() => {
      const target = new kakao.maps.LatLng(37.5569115255206, 126.867878866131);
      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: target,
        level: 3,
      };

      const map = new kakao.maps.Map(container, options);
      // 지도에 마커를 생성하고 표시한다
      const marker = new kakao.maps.Marker({
        position: target, // 마커의 좌표
        map: map, // 마커를 표시할 지도 객체
      });

      kakao.maps.event.addListener(marker, 'click', () => {
        // 마커 클릭 이벤트
      });
    });
  }, []);

initMap 함수를 만들었다
(참고로 x, y와 위경도는 순서가 반대다.)

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_KEY}&autoload=false`;
    script.async = true;

    document.head.appendChild(script);
    script.onload = initMap;

    return () => {
      document.head.removeChild(script);
    };
  }, [initMap]);

html에 넣는 게 아니라 해당 페이지에서 동적으로 스크립트가 추가될 수 있도록 하며 autoload=false를 넣지 않으면 에러가 발생한다.
KAKAO_KEY는 각자의 자바스크립트키를 넣는데 클라이언트 사이드에서 쓰기 때문에 노출되어도 상관 없는 값임

공식 문서는 좀 이전 문법, 바닐라 자바스크립트로 되어있는데 리액트에서도 해당 문서 그대로 해도 상관 없지만 리액트에 맞게 hook을 사용하여 적용하려면 이와 같은 방식으로 하면 된다. (리액트에 useRef를 만들어줬는데 굳이 셀렉터 document.getElementByID()같은 걸 쓸 필요 없다. 뷰도 마찬가지로 ref를 쓰는 게 낫다. 제이쿼리는 더더욱...)