$$config title: [프로젝트] React 카카오맵 API 활용, 키워드로 검색하여 리스트 만들기 keywords: - react - kakao - API $$ # kakao map API 검색 기능 구현 ## 검색 키워드로 데이터 받고, 리스트로 만들기 ```js const [inputText, setInputText] = useState(""); // value 값 const [place, setPlace] = useState(sessionStorage.getItem("search")); // 키워드 저장 const [Places, setPlaces] = useState([]); // 검색 데이터 저장 const onChange = (e) => { setInputText(e.target.value); sessionStorage.setItem("search", e.target.value); }; const searchSubmit = (e) => { e.preventDefault(); setPlace(inputText); setInputText(""); }; useEffect(() => { //생략 const ps = new kakao.maps.services.Places(); ps.keywordSearch(place, placesSearchCB, { useMapBounds: true }); function placesSearchCB(data, status, pagination) { if (status === kakao.maps.services.Status.OK) { let bounds = new kakao.maps.LatLngBounds(); for (let i = 0; i < data.length; i++) { displayMarker(data[i]); bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x)); } map.setBounds(bounds); displayPagination(pagination); setPlaces(data); } } // 생략 } ``` ```html