Search.js

import React, {useState} from "react";
import { Map, MapMarker } from "react-kakao-maps-sdk";

const {kakao} = window;

//카카오 지도 API를 이용한 검색(예정)

function SearchMap(props){
    // 아주대학교를 기본 위치로 설정
    const [state, setState] = useState({
        center: { lat: 37.28238488648025, lng: 127.04350967609274 },
        isPanto: true,
    });
    const [searchAddress, SetSearchAddress] = useState(); //주소 입력

    const handleInput = (e) => {
        SetSearchAddress(e.target.value);
    }

    const SearchStart = () => {
        console.log('Start Search!');// action test
        // 주소를 기반으로 한 검색 구현(제주특별자치도 제주시 첨단로 242 를 입력하면 kakao가 나온다)
        const geocoder = new kakao.maps.services.Geocoder();
        let callback = function(result, status) {
            if (status === kakao.maps.services.Status.OK) {
            const newSearch = result[0]
            setState({
                center: { lat: newSearch.y, lng: newSearch.x }
            })
            }
        };
        geocoder.addressSearch(`${searchAddress}`, callback);
    }

    return (
        <div className="UserInput">
            <input  onChange={handleInput}/>
            <button onClick={SearchStart}>검색!</button>
            <Map // 지도를 표시할 Container
                center={state.center}
                isPanto={state.isPanto}
                style={{
                    // 지도의 크기
                    width: "100%",
                    height: "450px",
                    }}
                level={3}>
            </Map>
        </div>
    )
}

function Search(props) {
    return (
		<div className="search">
			<h1>검색페이지입니다.</h1>
            <SearchMap/>
		</div>
    );
}

export default Search;