[React] Kakao API를 이용해 지도 출력

# Kakao Developers 설정

[React] Kakao Developers 애플리케이션 등록 및 설정

 

 

# 리액트 설정

1. env 파일에 JAVASCRIPT 키 등록

우선 .env 파일을 만들어 api 호출 시 사용할 앱 키(JAVASCRIPT 키)를 저장 (하드코딩으로 넣게 되면 좋지 않음)

파일은 프로젝트 루트 경로에 생성

[.env ]

REACT_APP_KAKAO_API_JS_KEY=jAVASCRIPT앱키

2. Map.js 에 Kakao 맵 로드

[Map.js]

${process.env.REACT_APP_KAKAO_API_JS_KEY} 이 부분은 .env 파일에 저장했던 키

useEffect의 빈배열을 이용해 컴포넌트가 처음으로 렌더링 될 때 카카오 맵을 불러오고 id값이 map인 요소에 적용

 

import React, { useEffect, useState } from 'react';

export default function Map() {

    const [map, setMap] = useState(null);
    const DEFAULT_LAT = 37.497625203;// 기본 위도
    const DEFAULT_LNG = 127.03088379;// 기본 경도

    useEffect(() => {

// 카카오 맵 로드const loadKaKaoMap = () => {
            window.kakao.maps.load(() => {
                const mapContainer = document.getElementById("map");// 지도 렌더링 할 요소 선택const mapOption = {
                    center: new window.kakao.maps.LatLng(DEFAULT_LAT, DEFAULT_LNG),// 지도 중심점level: 3,// 확대 레벨
                };
                const mapInstance = new window.kakao.maps.Map(mapContainer, mapOption);// 지도 생성

                setMap(mapInstance);
            });
        };

        const script = document.createElement('script');
        script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_API_JS_KEY}&libraries=services&autoload=false`;
        script.async = true;
        script.onload = () => {
            loadKaKaoMap();
        };
        document.head.appendChild(script);

    }, []);

    return (
        <>
            <div id="map" style={{width:'100%', height:'100vh'}}></div>
        </>
    )
}