마커 위도 경도 null 값 처리

몇몇 지도가 렌더링 되지 않는다.
서버(ctrl c) & 로컬(캐시 비우기 및 강력 새로고침) -> 해결 안 됨

아직 위도 경도가 채워지지 않은 식당들로 인해 문제가 발생한 건 아닌가 추측

• 문제 발생 코드

"use client";

  

import { Restaurant } from "@/types/info";

import { useEffect, useState } from "react";

import { Map, MapMarker } from "react-kakao-maps-sdk";

import ReSetttingMapBounds from "./ReSetttingMapBounds";

  

type Props = {

  restaurants: Restaurant[];

};

  

export default function KakaoMap({ restaurants }: Props) {

  const [points, setPoints] = useState<

    {

      lat: number;

      lng: number;

    }[]

  >([]);

  

  useEffect(() => {

    const newPoints = restaurants

	 // 위도 경도가 null이 아닌 것만 filter 하도록 추가

      .map((rest) => ({

        lat: Number(rest.latitude),

        lng: Number(rest.longitude)

      }));

    setPoints(newPoints);

  }, [restaurants]);

  

  return (

    <>

      <Map

        id="map"

        center={{ lat: 36.463648328911795, lng: 128.17089555281063 }}

        style={{ width: "800px", height: "800px" }}

        level={13}

      >

        {points.map((point, index) => (

          <MapMarker key={`marker__${point.lat}-${point.lng}-${index}`} position={point} />

        ))}

        {points.length > 0 && <ReSetttingMapBounds points={points} />}

      </Map>

    </>

  );

}

• 수정 후

  useEffect(() => {

    const newPoints = restaurants

      .filter((rest) => rest.latitude && rest.longitude) // null이 아닌 것만 추출

      .map((rest) => ({

        lat: Number(rest.latitude),

        lng: Number(rest.longitude)

      }));

    setPoints(newPoints);

  }, [restaurants]);

성공적으로 나온다