제목 그대로 입니다. 첨부한 gif처럼 줌인/아웃 시 지도를 띄울 때 설정했던 center가 잠깐 휙 보입니다.
환경은 Next.js고, 코드는 아래와 같습니다. 커스텀 훅으로 지도 불러오고 있습니다.
const useInitMap = () => {
const [map, setMap] = useState<any>(null);
const container = useRef<HTMLDivElement>(null);
//유저 현재 위치 불러옴
const location = useSelector(
(state: RootState) => state.curLocationState.location
);
//현재 위치를 불러오지 못했을 때
const error = useSelector(
(state: RootState) => state.curLocationState.error
);
useEffect(() => {
const script = document.createElement("script");
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${APPKEY}&libraries=services,clusterer&autoload=false`;
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
//center = 유저위치 ? 유저위치 : 기본 값, 이 값이 휙 지나갑니다.
const center =
location && !error
? new kakao.maps.LatLng(location.lat, location.lng)
: new kakao.maps.LatLng(
37.247949112203,
127.08086707223
);
const options = {
center,
level: 5,
};
const map =
container &&
new kakao.maps.Map(
container.current as HTMLDivElement,
options
);
setMap(map);
});
};
return () => {
setMap(null);
};
}, [container, location, error]);
return { map, container };
};
위 코드를 아래에서 사용하고 있습니다.
const searchmap = () => {
...
const { map, container } = useInitMap();
...
return (
...
<MapWrapper>
<Map id="container" ref={container} />
</MapWrapper>
...
);
};