[React]-마우스를 따라가는 포인터 구현하기!

연관있는 데이터는 하나의 객체로 하나의 상태를 만들어서 관리해주자!

clientX, clientY

브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시한다.
따라서, 스크롤바가 움직이더라도, 특정 지점의 clientX, clientY의 값은 동일하다.

AppXY.jsx

import React, { useState } from "react";
import "./AppXY.css";

export default function AppXY() {
  const [coord, setCoord] = useState({ clientX: 0, clientY: 0 });
  const mouseMove = (e) => {
    const mouseX = e.clientX; // 여기서 clientX는 key값이 아니라 실제 좌표상의 clientX
    const mouseY = e.clientY; // 여기서 clientY는 key값이 아니라 실제 좌표상의 clientY
    setCoord({ clientX: mouseX, clientY: mouseY });

    // 만약 수평으로만 이동이 가능하다면?
    // setCoord((prev) => ({ clientX: mouseX, clientY: prev.clientY }));

    // x,y외에 z좌표까지 추가된다면? 스프레드 연산자를 사용하자!
    // setCoord((prev) => ({ ...prev, clientX: mouseX }));
    console.log(coord);
  };
  return (
    <div className="container" onMouseMove={mouseMove}>
      <div
        className="pointer"
        style={{
          transform: `translate(${coord.clientX}px, ${coord.clientY}px)`,
        }}
      ></div>
    </div>
  );
}

📍state를 x,y좌표 따로 지정하지 않고 하나의 객체로 묶어서 명시해주는 것이 포인트다!

📍수평으로만 이동이 가능하게 하려면 y좌표는 prev를 사용해서 이전 상태의 값으로 지정하자!

📍z좌표가 추가 된다면 스프레드 연산자를 사용하자!