객체 상태관리

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import AppXY from "./AppXY";
import "./index.css";
import "./App.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <AppXY />
  </React.StrictMode>
);

AppXY.jsx

import React from "react";
import { useState } from "react";

export default function AppXY() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div
      className="container"
      onMouseMove={({ clientX, clientY }) => {
        setPosition((prev) => {
          return { x: clientX, y: clientY };
          // return { ...prev, y: clientY }; y좌표만 바꾸고 싶은 경우
        });
      }}
    >
      <div
        className="pointer"
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          color: "red",
        }}
      >
        mouse
      </div>
    </div>
  );
}