마우스가 움직일 때 작동하는 함수 : onPointerMove
마우스의 좌표값 : clientX, clientY
연관있는 state값들은 객체형식으로 관리
const [position, setPosition] = useState({ x: 0, y: 0 });
onPointerMove={(e) => {
setPosition({ x: e.clientX, y: e.clientY });
}}
객체 형식의 state에서 특정 값만 수정하려면?
const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
setPosition((prev)=>({x:e.clientX, y:prev.y, z:prev.z}))
또는
setPosition((prev)=>({...prev, x:e.clientX}))