Naver Map Api 페이지 이동 시 지도가 나타나지않는다?

이번 지도 작업은 Naver Map Api를 사용해보았다.

<Script
    strategy="afterInteractive"
    type="text/javascript"
    src={`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NCP_CLIENT_ID}`}
    onLoad={initializeMap}
  />

소스가 잘 로드되면 onload함수가 실행되면서 initializeMap을 호출한다.

나는 initializeMap함수에서 네이버 맵을 로드해주고있다.

그런데 여기서 다른 페이지를 갔다오면 지도가 뜨지않는 버그가 발생한다.

현재 코드에서는 다른 페이지로 이동할때 map 컴포넌트가 unmount되고있기때문에 map instance는 destroy된다.

하지만 스크립트가 처음 불러졌을때만 실행되는 onLoad를 사용하였기때문에 다시 지도 컴포넌트로 돌아와도 지도가 뜨지않는것이다.

참고로, Next의 Script는 같은 스크립트를 여러번 호출하지않는다.

그러므로 onLoad대신 onReady로 바꿔보았다. onReady는 스크립트 로딩을 마쳤을때뿐아닌 컴포넌트가 mount될때마다 실행된다.

참고로! 이 동작을 확인하기위해서는 dev가아닌 production 환경에서 실행해야한다. 또는 nextConfig.js파일에서 reactStrictMode를 false로 바꿔줘야한다.(이땐 개발환경 다시 run해줘야함)