map.morph가 작동하지 않습니다.

Next.js 시작하기(feat. 지도 서비스 개발)

지도 URL 공유 기능 구현하기

해결된 질문

작성

338

수정됨

안녕하세요 강사님, 좋은 강의 잘 듣고 있습니다!

다름 아니라, 아래 캡쳐와 같이(캡쳐하기 위해 일부러 sleep을 걸고 진행했습니다.),

resetMapOptions를 실행하면서, morph를 못찾겠다면서 그냥 화면을 새로고침만 해버립니다.

스크린샷 2023-07-14 오후 3.08.45.png

제가 사용하는 환경은 아래와 같고,

"next": "^13.4.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@types/navermaps": "^3.6.5",

next.config.js도 말씀주신대로 잘 따라했고

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

모든 컴포넌트 제일 상단에 'use client'도 명시했는데 왜 안되는지 모르겠네요 ㅜㅜ 도움주시면 감사하겠습니다..! 어쩌면 버전의 문제일 수도 있을 것 같은데.. 주변에 물어볼 사람이 없어서 강사님께 한 번 고민 부탁드려봅니다!

감사합니다.

next.js map morph

답변 1

박용주

지식공유자

안녕하세요! 코드를 확인해보니 SWR의 map 상태에 올바른 값이 들어있지 않아서 발생하는 문제입니다.

useMap hook에 initializeMap 함수가 있지만, 현재 코드상으론 이 함수를 사용하지 않고 console.log('load!') 만 수행하고 있는 상황입니다. 즉, map.morph에서 map이 undefined이기 때문에 에러가 발생합니다.

Map.tsx에서 onReady가 trigger되었을 때, 적절하게 useMap hook의 initializeMap 함수를 호출하면 해결됩니다. 강의에서 제공해드린 소스 코드도 참고하시면 도움이 될 것 같습니다!

감사합니다 :)

Peter Cha

질문자

아, 제가 그 부분을 간과한 거였군요! 강사님 감사합니다!! 최고에요!

인프런 커뮤니티 질문&답변

map.morph가 작동하지 않습니다.