REACT_마우스를 따라오는 DIV 만들기

클릭할 때마다 클릭한 위치에 div를 호출하려고 찾아보다가 배운것.

div 옵션에

onMouseMove()라는 옵션을 이용하자.

먼저 state를 하나만들고 전체 프로젝트를 감싸고 있는 div에 onMouseMove()를 적용시켜주자

const [xy,setXY]=useState({x:0,y:0})
const handleMouseMove=(e)=>{
        setXY({x:e.clientX,y:e.clientY});
    }

<div onMouseMove={(e)=>handleMouseMove(e)}>
   <div
      style={{position:"absolute",left:xy.x,top:xy.y}}
   >마우스따라이동<div>
</div>

hendleMouseMove의 역할은 state를 업데이트하는 것이다.
style에서 absolute를 주고 left와 top을 state값으로 정해주면 됨.

onMouseMove가 적용된 div 안에서 마우스가 움직이면 잘 따라오는 것을 볼 수 있다.