WRay
51
2021-11-25 20:15:10
2
93

React에서 특정 박스 클릭-드래그로 위치 재지정 질문드립니다.


    const container = React.useRef();
const box = React.useRef();


const { width: containerWidth, height: containerHeight } = container.current.getBoundingClientRect();
const { width: boxWidth, height: boxHeight } = box.current.getBoundingClientRect();
let isDragging = null;
let originLeft = null;
let originTop = null;
let originX = null;
let originY = null;

box.addEventListener("mousedown", (e) => {
e.preventDefault();
isDragging = true;
originX = e.clientX;
originY = e.clientY;
originLeft = box.offsetLeft;
originTop = box.offsetTop;
});

document.addEventListener("mouseup", (e) => {
isDragging = false;
});

document.addEventListener("mousemove", (e) => {
if (isDragging) {
const diffX = e.clientX - originX;
const diffY = e.clientY - originY;
const endOfXPoint = containerWidth - boxWidth;
const endOfYPoint = containerHeight - boxHeight;
box.style.left = `${Math.min(Math.max(0, originLeft + diffX), endOfXPoint)}px`;
box.style.top = `${Math.min(Math.max(0, originTop + diffY), endOfYPoint)}px`;
}
});


Cannot read properties of undefined (reading 'getBoundingClientRect')

원래 HTML, JS로 작업했던 것을 리액트로 만들려하는데 어떤 부분에서 꼬인건지 감이 잘 안옵니다..
기존 QuerySelctor를 useRef-current로 접근하는 식으로 바꿨는데 이런 오류가 나네요 ㅜㅜ
getBounding을 다른 식으로 접근해야할까요? 도와주십쇼 '_'..

0
  • 답변 2

  • 오키동키
    119
    2021-11-25 20:35:14
    useRef는 렌더링이 끝나면 읽어올 수 있어 useEffect 안에서 읽거나 다른 function을 만들어 활용하시는게 좋을 거에요~
  • WRay
    51
    2021-11-26 00:19:13

    오키동키

    useEffect로 해결했습니다!! 감사합니다 :-)

  • 로그인을 하시면 답변을 등록할 수 있습니다.