출처 : 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 함수를 실행시키도록 구현했다.
