[네이버지도] 새로고침 해야만 지도가 뜨는 이슈,,

처음 화면 들어왔을 때 지도가 딱 생겨야 하는데 새로고침 해야만 뜨고있다

 

지도를 그려주는 Script는 페이지가 렌더링 된 후, 비동기적으로 로드되는데, 처음 화면 진입 시, useEffect가 먼저 실행됨

 

그래서 Script 가 다 그려진 후 useEffect가 실행되도록 하여야 함

 
  React.useEffect(() => {
    // 스크립트 로드 여부 확인
    if (!isScriptLoaded) {
      return;
    }


    // 네이버 지도 초기화
    if (window.naver && window.naver.maps) {
      if (!mapRef.current) {
        return;
      }

      mapInstance.current = new window.naver.maps.Map(mapRef.current, {
        center: new window.naver.maps.LatLng(37.5665, 126.978),
        zoom: 13,
      });
      console.log('네이버 지도 초기화 완료');
    } else {
      console.error('네이버 지도 API가 준비되지 않았습니다.');
    }
  }, [isScriptLoaded]);
 
 return (
    <div className="relative h-screen flex flex-col">
      <Script
        src={`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=`}
        strategy="beforeInteractive"
        onLoad={() => {
          setIsScriptLoaded(true); 
        }}
        onError={(error) => {
          console.error('네이버 지도 API 스크립트 로드 실패:', error);
        }}
      />

이렇게 해도 스크립트 로드 완료 시점이랑 지도 초기화 시점이랑 불일치해서 안되었다

 

결론은,, Script를 사용하지 않고 document.createElement를 사용해서 스크립트를 수동으로 로드하였음

 React.useEffect(() => {
    
    // 스크립트 로드
    const script = document.createElement('script');
    script.src = `https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=`;
    script.async = true;

    script.onload = () => {
      // 지도 초기화
      if (window.naver && window.naver.maps) {
        if (!mapRef.current) {
          console.error('mapRef가 존재하지 않습니다.');
          return;
        }
        
        mapInstance.current = new window.naver.maps.Map(mapRef.current, {
          center: new window.naver.maps.LatLng(37.5665, 126.978),
          zoom: 13,
        });
    };

되었당