State를 어떻게 사용해야 할지 몰르겠네요

입력을 1을 하면 innerText 1을 감지해서 마커를 찍겠금 만들려고하는데… 계속 변경을 감지못했는지
마커를 안찍어주네여… input에 1을 넣으면 마커 찍어주게끔 state를 해주고 싶은데 어떻게 해줘야 되나요…

Map.js
import React, {useState, useEffect } from ‘react’

import * as point from’./PintXY’;

function Map() {

useEffect(()=>{



  var container = document.getElementById('map');

 

  var options = {

    center: new kakao.maps.LatLng(33.44985591507654,  126.56367440863264),

    level: 3

  };

  var map = new kakao.maps.Map(container, options);

  function marking(x,y){ //파라메타 들어와서 그 파라메타의 좌표로 마커 생성

    var map = new kakao.maps.Map(container, options); //현재 마커가 없음 입력이들어오면 지도상에 마커 표시

    var markerPosition  = new kakao.maps.LatLng(x, y); //지도 마커 표시 코드

    var marker = new kakao.maps.Marker({position: markerPosition});

    marker.setMap(map)

     

  }

  function getXY(state){

   

    if(state == 1){

       

        const setX = 37.365264512305174

        const setY = 127.10676860117488

        marking(setX,setY);      

        }

    }



  getXY(point.PrintXY())



  }, [])



  return (

      <div>

      <div id="map" className = 'centerMap' style={{width:"1500px", height:"800px"}}></div>

     

      </div>

  )

}

export default Map;

PintXY.js
export function PrintXY(){

const name= document.getElementById('numberSearch').value;

document.getElementById("result").innerText = name;

return(

    name

);

}

텍스트 값이 변경될 때 마커를 생성하는 로직으로 구현해주세요.
Input onchange 이벤트,
input에 대한 컴포넌트를 생성해서 값이 변경됨을 알 수 있는 다양한 방법들이 있습니다.
관련 내용을 검색하면 많은 예제를 확인할 수 있습니다.
참고해서 로직을 구현해주세요.

1개의 좋아요