[React] 카카오지도API 에서 키워드로 장소 검색하기

·2022년 11월 5일

출처 : https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/library/keywordBasic

원래 제공하는 기능은 키워드로 장소들을 검색해서 지도에 마커로 찍어주고 그 위치로 지도를 이동시켜주는 기능인데, 내게 필요한 기능은 키워드로 검색해서 그 지역으로 이동하는 기능이였다.
그래서 위의 웹사이트에서 제공하는 코드를 필요에 맞게 아래처럼 수정했다.

  const searchLocation = () => {
    const ps = new kakao.maps.services.Places();
    ps.keywordSearch(keyword.current, (data, status, _pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        const bounds = new kakao.maps.LatLngBounds();
        data.map(data => {
          bounds.extend(new kakao.maps.LatLng(data.y, data.x));
        });
        map.setBounds(bounds);
      }
    });
  };

리렌더링이 불필요하게 자주 일어나는것을 방지하기 위해 input의 값을 useRef를 이용해 keyword라는 Ref에 저장해주고 엔터를 누르면 searchLocation 함수를 실행시키도록 구현했다.

0개의 댓글