2024.06.10 drag_라이브러리_없이_구현_중_트러블슈팅 1

🚨  TroubleShotting

드래그를 라이브러리 없이 mouseEvent로 구현해보고 있던 중,
드래그를 반복적으로 하면 이전에 마지막으로 드래그 했던 요소에서 더 드래그 되지 않고
자꾸 처음으로 돌아가는 현상이 발생했다.

이런 오류가 발생했다.

---

문제 발생의 배경 - As Is

  const [startMoveX, setStartMoveX] = useState(0);
  const [mouseDown, setMouseDown] = useState(false);
  const [movingX, setMovingX] = useState(0);

const handleMouseDown = (clickEvent: React.MouseEvent<Element, MouseEvent>) => {
    setMouseDown(true);
    setStartMoveX(clickEvent.screenX);
  };

  const handleMouseUp = (mouseUpEvent: React.MouseEvent<Element, MouseEvent>) => {
    setMouseDown(false);
 };

  const handleMouseMove = (moveEvent: React.MouseEvent<Element, MouseEvent>) => {
    setMovingX(moveEvent.screenX);
  };

  return (
    <div className="w-full overflow-hidden" ref={containerRef}>
      <div
        className="flex flex-nowrap gap-4 h-[300px] w-max overflow-x-visible"
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseMove={ handleMouseMove }
        style={{
          transform: `translateX(${mouseDown ? movingX - startMoveX : null}px)`
        }}

mouseDown 되었을 때의 위치를 startMoveX라는 state로 관리하고
mouseMove 중의 위치를 movingX라는 state로 관리한 뒤,
movingX - startMoveX  값을 이동거리라 판단하여 style에 이동거리만큼 translateX로 적용했다.

---

Why(이유) ?

드래그는 매 프레임마다 작은 이동이 모여서 구현된다.
즉 [---] 이게 한 프레임이라고 하면, [ 에서 시작해서 --- 만큼 이동하고 ]  가 되어야 한 프레임이 끝난다.
이런 프레임들이 모여서 한 번의 드래그가 발생한다.

우선 handleMouseMove 함수 내에 이동거리를 갱신하는 로직은 오직 mouseDown이 true 일 때만 실행되어야 했고

1. 이동거리는 누적되어야 했다.

이동거리가 누적되어야 프레임들이 모여서 한 번 드래그의 총 이동거리가 나온다.
누적되지 않으면 제일 마지막 프레임에서의 이동거리만 측정이 되어 자꾸 원점으로 돌아가버렸던 것이다.
누적되는 값은 계속 변하는 값이므로 position이라는 state를 새로 만들었고, handleMouseMove 함수를 이렇게 바꿨다.

시행착오 1

  
const [position, setPosition] = useState(0);
...
   const handleMouseMove = (moveEvent: React.MouseEvent<Element, MouseEvent>) => {
   if(mouseDown) {
    setMovingX(moveEvent.screenX);
    setPosition((prev) => prev + (movingX - startMoveX));
   } 
  };
  
    return (
    <div className="w-full overflow-hidden" ref={containerRef}>
      <div
        className="flex flex-nowrap gap-4 h-[300px] w-max overflow-x-visible"
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseMove={handleMouseMove}
        style={{
          transform: `translateX(${mouseDown ? position : null}px)`
        }}
      > 
      ...

근데ㅋㅋㅋ 이렇게 바꿨더니 조금만 드래그를 해도 엄청나게 이동해버렸다.
console.log(position)을 했더니 3519 라는 숫자가 나왔다.
실제로는 한 50px 한 것 같은데..

2. 시작점(startMoveX)

이동거리를 movingX - startMoveX로 해두었는데, 
startMoveX는 mouse가 아무리 움직여도 계속 처음 클릭한 곳이지 않은가?
그러니, 마우스를 많이 움직이면 움직일수록 movingX - startMoveX가 계속 늘어났고 그게 누적이 되어 3519 라는 어마한 숫자가 나왔던 것이다.

startMoveX를 마우스가 움직일 때마다 갱신해줘야겠다!
하여 handleMouseMove에 setStartMoveX() 로직을 추가했다.

시행착오 2

  const handleMouseMove = (moveEvent: React.MouseEvent<Element, MouseEvent>) => {
    if (mouseDown) {
      setMovingX(moveEvent.screenX);
      setStartMoveX(moveEvent.screenX);
      setPosition((prev) => prev + (movingX - startMoveX));
    }
  };

근데 또 이랬더니, 이번에는 내가 움직인 만큼만 이동하는데 끊겨서 띡 띡 드래그가 되는 게 아닌가..

아니 이렇게 뻣뻣한 드래그를 원한 게 아니었는데...

3. 마우스 움직임과 동시에 이동거리 갱신

setMovingX를 한 뒤에 -> 이동거리가 갱신이 되니 당연한 결과였다. 
즉, 마우스가 움직이는 동시에 이동거리가 갱신이 되는 게 아니라,
움직이고 그걸 setMovingX를 한 뒤에 re-렌더링이 된 후 계산된 결과물이 보여졌던 것.
그래서 movingX state를 없앴다. 그냥 바로 moveEvent.screenX에서 startMoveX를 뺐다.

시행착오 3

 const handleMouseMove = (moveEvent: React.MouseEvent<Element, MouseEvent>) => {
    if (mouseDown) {
      const deltaX = moveEvent.screenX - startMoveX;
      setPosition((prev) => prev + deltaX); // 이전 위치에 이동 거리를 더함
      setStartMoveX(moveEvent.screenX);
    } 
  };

---

what(결과) - To Be

이전처럼 드래그를 하고 다시 드래그를 할 때 원점으로 돌아가지 않고
마지막 드래그에서 이어서 드래그를 할 수 있도록 성공했다.

---

💡 새롭게 알게된 점

드래그의 작동원리: 작은 프레임들의 모임