안녕하세요. quickstart 관련 질문드립니다.

[ehd1120gus]

1. 아래 quickstart 코드에서 NaverMapsProvider 는 NavermapsProvider로 변경된건가요?

import { NaverMapsProvider } from 'react-naver-maps';

function App() {
  return (
    <NaverMapsProvider 
      ncpClientId='MY_NAVERMAPS_CLIENT_ID'
      // or finClientId, govClientId  
    >
      <TheRestOfYourApplication />
    </NaverMapsProvider>
  )
}

2. 아래는 quickstart를 참고하여 NaverMapsProvider를 NavermapsProvider로 변경 후 작성한 App.js 코드입니다.

import { NavermapsProvider, Container as Mapdiv, NaverMap, Marker, useNavermaps } from 'react-naver-maps';

function App() {
    return (
        <NavermapsProvider
            ncpClientId ='ehd1120gus's Client ID'
            // or finClientId, govClientId
        >
            <Mapdiv
                style={{
                    width: '100%',
                    height: '600px',
                }}
            >
                <MyMap />
            </Mapdiv>
        </NavermapsProvider>
    )
}

function MyMap() {
    // instead of window.naver.maps
    const navermaps = useNavermaps()

    return (
        <NaverMap
            defaultCenter={new navermaps.LatLng(37.3595704, 127.105399)}
            defaultZoom={15}
        >
            <Marker
                defaultPosition={new navermaps.LatLng(37.3595704, 127.105399)}
            />
        </NaverMap>
    )
}

export default App;

실행 후 chrome 화면은 하얗게 나오고, 로그에는 [Uncaught Error: react-naver-maps: MapDiv is not found. Did you correctly wrap with MapDiv?] 에러가 발생하는데 혹시 어디가 문제일까요?

읽어주셔서 감사합니다. 답변 기다리겠습니다.

[ehd1120gus]

제 에디터에서 export default App; 가 비활성화되어 no usage라고 합니다.

[zeakd]

앗 동현님 제가 재현가능할 수 있도록 github repository를 생성하여 공유 부탁드린다는 말씀이었는데요. create react app 에서 App.js만 고친 상황일까요?

[ehd1120gus]

https://github.com/ehd1120gus/react-naver-map-example.git
레포지토리 공유드립니다..!

[zeakd]

index.js에서 작성하신 App.js 대신 다른 컴포넌트를 잘못 사용중이신 것 같습니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './NaverMapView'; // <- 여기
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[ehd1120gus]

말씀하신 대로 이전에 남겨둔 NaverMapView.js가 사용중인걸 확인 후 변경하였더니 정상적으로 실행됩니다. 늦은 시간까지 답변 감사합니다. 앞으로 잘 활용해서 많은 사람들이 볼 수 있도록 잘 기록해둘게요..! 좋은 패키지 만들어주셔서 감사합니다.