109일차 TIL : 코스 카드 클릭시 해당 장소의 좌표로 이동하기

1. 검색 결과에서 여행지를 선택할 때마다 현재 bounds(좌표값) 함께 추가하기
2. 카드 클릭시 setState로 해당 장소의 bounds로 변경하기
3. useEffect로 장소 ID가 바뀔 때마다 map.panTo(boundsInfo) 실행

     useEffect(() => {
       // @ts-ignore
         map.panTo(boundsInfo);
     }, [filteredId]);

에러

여기까지 구현 후 새로고침 하자 cannot read properties of undefined (reading 'setbounds')라는 에러메시지와 함께 빈화면이 출력되었다.

원인

정확히는 setBounds가 아니라 map이 문제였다. map은 검색을 할 때 생성되는데 최초 렌더링시에는 검색이 일어나지 않기 때문에 map의 메소드인 setBounds가 동작할 수 없었던 것이다.

해결

  useEffect(() => {
    if (map !== undefined) {
      // @ts-ignore
      map.panTo(boundsInfo);
    }
  }, [filteredId]);

조건문으로 예외 처리하자 간단하게 해결되었다.