지도 확대/축소시 처음 설정한 center가 보이는 현상

제목 그대로 입니다. 첨부한 gif처럼 줌인/아웃 시 지도를 띄울 때 설정했던 center가 잠깐 휙 보입니다.
Sep-03-2022 02-18-35

환경은 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>
            ...
    );
};

코드에서 훅이 실행될 때마다 지도를 새로 생성하고 있습니다.
location 또는 error 값이 변경될 때마다 훅이 실행돼서 지도가 여러개 겹처서 생성되고 있는 것 같습니다.

훅을 아래와 같이 2가지로 분리해주세요.
최초로 지도를 한 번 생성할 수 있게 container만 감지하는 훅과
location, error가 변경될 때 setCenter로 생성한 지도에 중심 좌표를 재설정하는 훅으로 구성해주세요.

답변 감사합니다. 개발자도구 열어보니 말씀하신대로 map이 두개가 겹쳐있는걸 확인했습니다. 그런데 useEffect 의존성배열에 container만 넣어도 보고 ceter도 고정값으로 주고 location로직을 전부 지워봤는데도 해결되진 않네요… 다른곳이 문제인듯 합니다. 어디서 두번 렌더링이 되는건지 찾아봐야겠습니다ㅎㅎ 수고하세요.

그냥 strictmode때문에 두 번 실행되는거였습니다… 해결했습니다 감사합니다.

2개의 좋아요