108일차 TIL : 최종프로젝트 - 카카오맵 마커간 라인 연결

에러

라인 미반환

원인

(중략)

  return (
    <>
      {courseList.map((item: any, index: number) => (
        <>
          (중략)
          <Polyline
            path={[
                    [
                      { lat: item.position.lat, lng: item.position.lng },
                    ],
                  ]}
          />
        </>
      ))}
    </>
  );

리액트 카카오맵 SDK의 예시를 보면 아래와 같이 path 안에 라인을 연결해줄 좌표 정보가 담겨있다. 그러나 위 코드는 반복문이기 때문에 path 안에 좌표 정보가 들어오는 것이 아니라 <Polyline /> 컴포넌트가 item 갯수만큼 반복되고 있기 때문에 라인이 나타나지 않는 것이다.

      <Polyline
        path={[
          [
            { lat: 33.452344169439975, lng: 126.56878163224233 },
            { lat: 33.452739313807456, lng: 126.5709308145358 },
            { lat: 33.45178067090639, lng: 126.572688693875 },
          ],
        ]}
      />

해결

  let polyline: any = [];

  courseList.map((item: any) => {
    polyline.push(item.position);
  });

1. 빈 배열 polyline 생성
2. courseList를 map으로 돌면서 각각의 코스의 좌표를 polyline에 추가
3. path={polyline} 적용