AppXY_객체initialState(transform, onPointerMove)

• 객체initialState
• transform
• onPointerMove

---

AppXY.css

.container {
  width: 100vw;
  height: 100vh;
  background-color: beige;
}

CSS에서 전체 배경을 설정하고 싶다면 위와 같이 코드를 작성하면 된다.

---

답안1(state를 개별적으로 작성)

AppXY.jsx

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

export default function AppXY() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  return (
    <div
      className='container'
      onPointerMove={(e) => {
      	console.log(e.clientX, e.clientY);
        setX(e.clientX);
        setY(e.clientY);
      }}
    >
      <div
        className='pointer'
        style={{ transform: `translate(${x}px, ${y}px)` }}
      />
    </div>
  );
}

---

답안2(initialState를 객체로 작성)

AppXY.jsx

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

export default function AppXY() {
  const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
  return (
    <div
      className='container'
      onPointerMove={(e) => {
        // setPosition({ x: e.clientX, y: e.clientY });
        // 만약 수평으로만 이동이 가능하다면?
        // 객체를 return해줄때는 소괄호안에 중괄호로 작성한다.
        // 코드블럭인지, 객체인지 React가 헷갈려하기때문
        setPosition((prev) => ({ ...prev, x: e.clientX }));
      }}
    >
      <div
        className='pointer'
        style={{ transform: `translate(${position.x}px, ${position.y}px)` }}
      />
    </div>
  );
}

객체를 return해줄때는 React가 코드블럭인지, 객체인지 헷갈려하기때문에 소괄호안에 중괄호로 작성한다.