[React] 리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티

자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click/move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다.

 

 

TL;DR

---

❶ 마우스를 클릭했을 때

• clientX, clientY (뷰포트 기준)좌표와, 요소의 스크롤 위치 scrollLeft, scrollTop 저장
• 클릭 상태 true로 변경
• (CSS) cursor: grabbing user-select: none

 

❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때

• ①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위
• (요소의 현재 스크롤 위치)와 (스크롤한 값)을 뺀 위치로 스크롤 이동

 

❸ 마우스 클릭을 해제하거나 이벤트 영역을 벗어났을 때

• 클릭 상태 false로 변경
• (CSS) cursor: grab

 

❹ 요소를 기준으로 클릭한 곳에 마커(이미지) 등을 추가하고 싶을 때

• 네이티브 이벤트에 접근해서 offsetX, offsetY 좌표값 저장 후(스크롤 영역까지 포함한 값)
• 자식 이미지 태그의 left, top 포지션 값으로 offsetX, offsetY 할당

 

 

기하 프로퍼티

---

기하 프로퍼티 이미지 - 출처 JavaScript Info

 

메서드별 측정 기준 ⭐️

• offset : 이벤트가 걸려 있는 DOM 객체 기준
• screen : 모니터 기준
• client : 브라우저 기준
• page : 문서 기준

 

구현전 알아야할 기하 프로퍼티 ⭐️

기하 프로퍼티의 값은 숫자이며 픽셀 단위로 측정. scrollLeft, scrollTop을 제외한 모든 기하 프로퍼티는 읽기 전용

 

마우스 이벤트를 제외하고 높이(세로) 관련 프로퍼티만 표시 처리

 

❶ clientWidth, clientHeight : 해당 요소의 내부 너비 / 높이

• 포함 : padding
• 제외 : (존재하면)스크롤바 너비 or 높이, border, margin

 

❷ offsetWidth, offsetHeight : 해당 요소의 너비 / 높이

• 포함 : padding, 스크롤바 너비 or 높이, border
• 제외 : margin
• CSS에서 box-sizing: border-box 일 때 지정한 너비 / 높이와 동일함

 

❸ scrollWidth, scrollHeight : 스크롤바에 의해 감춰진 부분을 포함한 콘텐츠의 전체 너비 / 높이

• 포함 : padding, border
• 제외 : margin

 

❹ scrollLeft, scrollTop (수정가능) : 스크롤해서 가려진 콘텐츠 영역의 너비 / 높이

• scrollTop을 0혹은 1e9으로 설정해서 최상단 / 최하단으로 옮길 수 있음
• 요소가 아닌, 문서의 스크롤 상태를(가려진 콘텐츠 영역 정보) 확인할 때 (참고)
  • window.pageXOffset, window.pageYOffset (모든 브라우저에서 사용 가능)
  • document.documentElement.scrollTop, document.documentElement.scrollLeft

 

❺ mouseEvent.clientX, mouseEvent.clientY : 브라우저 화면 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 브라우저 화면이 기준이므로 스크롤해도 값이 변하지 않음.

 

❻ mouseEvent.PageX, mouseEvent.pageY : 문서 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 문서가 기준이므로 스크롤하면 값도 변함(위 이미지엔 표시 안함)

 

❼ 요소를 끝까지 스크롤 했는지 판별하기

// 결과값이 true라면 요소의 끝까지 스크롤한 상태
element.scrollHeight - element.scrollTop === element.clientHeight;

 

❽ 문서의 전체 높이값 구하기 (참고)

// 문서의 정확한 전체 높이를 구하기 위한 코드
const scrollHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.body.clientHeight,
  document.documentElement.clientHeight,
);

왜 이런 방식으로 문서 전체 높이를 구해야 하는 걸까요? 이유는 알아보지 않는 게 낫습니다. 이런 이상한 계산법은 아주 오래전부터 있었고 그다지 논리적이지 않은 이유로 만들어졌기 때문입니다.
— JavaScript Info

 

뷰포트 기준 요소 위치 (참고용)

브라우저 화면 기준 요소의 위치 좌표 - 이미지 출처 JavaScript Info

 

getBoundingClientRect() 를 사용하면 브라우저 화면을 기준으로 한 요소의 위치 좌표를 조회할 수 있다.

const clientRect = mapRef.current.getBoundingClientRect(); // React
const clientRect = elem.getBoundingClientRect(); // Vanilla JS
console.log(clientRect.x);
// ...

 

• clientRect.x, clientRect.left : 화면 좌측부터 해당 엘리먼트의 왼쪽 변까지의 거리
• clientRect.y, clientRect.top : 화면 상단부터 해당 엘리먼트의 위쪽 변까지의 거리
• clientRect.right : 화면 좌측에서 해당 엘리먼트의 오른쪽 변까지의 거리
• clientRect.bottom : 화면 상단에서 해당 엘리먼트의 아래쪽 변까지의 거리
• clientRect.width : 해당 엘리먼트의 너비 (콘텐츠 + padding + border)
• clientRect.height : 해당 엘리먼트의 높이 (콘텐츠 + padding + border)

 

 

엘리먼트

---

이미지 사이즈가 부모 요소보다 크다고 가정한다(그래야 스크롤할 수 있으므로).

 

div(S.Map)의 scrollLeft, scrollTop (기하 프로퍼티)속성에 속성에 접근해야 하므로 useRef()로 생성한 객체를 div 태그의 ref 속성에 할당한다. 그럼 Ref 객체의 .current 값은 div 태그를 가리키게 된다. 그 후 아래처럼 사용할 수 있다.

// scrollLeft도 있다. 아래는 scrollTop만 예시로 듬
mapRef.current.scrollTop; // 세로 스크롤 위치 조회
mapRef.current.scrollTop = 100; // 세로 스크롤 위치를 100으로 이동(스크롤에 의해 가려진 콘텐츠 높이가 100px이 되게끔 수정)
mapRef.current.scrollBy(x, y); // 현재 스크롤 위치에서 x(가로), y(세로)만큼 이동
mapRef.current.scrollTo(pageX, pageY); // 스크롤을 x(가로), y(세로) 위치로 이동

 

img 태그는 드래그할 필요가 없으므로 draggable 속성에 false 값을 준다.

// Map.js
import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';

const Map = () => {
  const mapRef = useRef(null);

  return (
    <S.Map ref={mapRef}>
      <img draggable={false} alt="map" src={'...'} />
    </S.Map>
  );
};

 

요소에 마우스를 올리면 손 모양으로 바뀌도록 cursor 속성을 grab으로 준다. 이미지가 부모 요소(S.Map)보다 커도 스크롤이 생기지 않도록 overflow는 hidden으로 변경한다.

// Map.js - CSS(Styled-Components)

const S = {};

S.Map = styled.div`
  position: relative;
  width: 100%;
  height: 100%;

  cursor: grab;
  overflow: hidden;
`;

 

 

State

---

스크롤 상태

마우스 이벤트로 발생한 좌표를 저장하기 위한 상태 정의

import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';

const Map = () => {
  const [pos, setPos] = useState({ top: 0, left: 0, x: 0, y: 0 });
  // ...
};

• top : div(S.Map) 엘리먼트의 y(세로) 스크롤 위치 — 스크롤에 의해 가려진 영역의 세로 길이
• left : div(S.Map) 엘리먼트의 x(가로) 스크롤 위치 — 스크롤에 의해 가려진 영역의 가로 길이
• x : 마우스 클릭 이벤트의 event.clientX 좌표 — 브라우저 화면 기준의 X 좌표
• y : 마우스 클릭 이벤트의 event.clientY 좌표 — 브라우저 화면 기준의 Y 좌표

 

클릭 상태

클릭 여부를 확인하기 위한 상태 정의

// Map.js
import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';

const Map = () => {
  const [isMouseDown, seIsMouseDown] = useState(false);
  // ...
};

 

 

마우스 핸들러

---

React는 새로운 props를 받거나 상태가 변경되면 컴포넌트 안의 모든 함수를 다시 정의하므로, useCallback을 사용하여 값이 변경됐을 때만 재정의하도록 한다.

 

onMouseDown (Tic)

마우스를 클릭했을 때 호출할 startDrag() 핸들러를 정의한다.

 

1. 클릭 상태 true 로 변경
2. 현재 요소(S.Map)의 스크롤 위치 저장
3. 마우스를 클릭한 위치 저장
4. (CSS) cursor 속성은 grabbing으로 변경하고, user-select는 none(텍스트 선택 방지)으로 변경

 

// Map.js
import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';

const Map = () => {
  const [isMouseDown, seIsMouseDown] = useState(false);
  const startDrag = useCallback(({ clientX, clientY }) => {
    seIsMouseDown(true);

    // 클릭 시점의 clientX, clientY 좌표와 요소의 스크롤 위치 저장
    setPos({
      left: mapRef.current.scrollLeft, // 요소의 left 스크롤 위치(스크롤에 의해 가려진 영역의 가로 길이)
      top: mapRef.current.scrollTop, // 요소의 top 스크롤 위치(스크롤에 의해 가려진 영역의 세로 길이)
      x: clientX, // 브라우저 화면(뷰포트) 기준의 X 좌표(left)
      y: clientY, // 브라우저 화면(뷰포트) 기준의 Y 좌표(top)
    });
  }, []);
  // ...

  return (
    <S.Map ref={mapRef} onMouseDown={startDrag} isMouseDown={isMouseDown}>
      <img draggable={false} alt="map" src={'...'} />
    </S.Map>
  );
};

// CSS (styled-components)
S.Map = styled.div`
  // ...
  cursor: grab;
  overflow: hidden;

  ${({ isMouseDown }) =>
    isMouseDown &&
    css`
      cursor: grabbing;
      user-select: none;
    `}
`;

 

onMouseMove (드래그) ⭐️

마우스를 드래그했을 때 호출할 dragging 핸들러를 정의한다. 클릭하지 않은 상태라면 아무 작업도 하지 않고, 만약 클릭한 상태라면...

 

❶ 마우스 드래그를 멈춘 지점과, 마우스를 클릭한 지점을 뺀 값 dx, dy를 구하고 — 스크롤한 범위의 값

 

❷ 현재 스크롤 위치와, 스크롤한 값을 뺀 위치로 스크롤 이동

 

"아래(클릭) → 위" 방향으로 드래그는 스크롤 +

현재 top은 0, clientY(드래그 멈춘 지점) 30, y(클릭한 지점) 60이라고 가정

• 30 - 60 = -30 → dy(clientY - y)
• 0 - (-30) = 30 → top - dy
• 스크롤 top 30으로 이동 → 스크롤 top이 0에서 30으로 늘어남

 

"위(클릭) → 아래" 방향으로 드래그는 스크롤 -

현재 top은 30, clientY(드래그 멈춘 지점) 60, y(클릭한 지점) 30이라고 가정

• 60 - 30 = 30 → dy(clientY - y)
• 30 - 30 = 0 → top - dy
• 스크롤 top 0으로 이동 → 스크롤 top이 30에서 0으로 줄어듬

 

// Map.js
import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';

const Map = () => {
  const dragging = useCallback(
    ({ clientX, clientY }) => {
      if (isMouseDown) {
        const { x, y, left, top } = pos;
        // (마우스 이동을 멈춘 지점)과 (마우스를 클릭한 지점)을 뺀 값 → 스크롤한 범위의 값
        const dx = clientX - x;
        const dy = clientY - y;

        // (마우스를 클릭했을 때의 요소 scroll 위치)와 (스크롤한 값)을 뺀 만큼 스크롤 이동
        // dy가 -면 (아래)에서 (위) 방향 드래그이며, -(-dy) → +dy → 스크롤 +
        // dy가 +면 (위)에서 (아래) 방향 드래그이며, -(dy) → -dy → 스크롤 -
        mapRef.current.scrollTo(left - dx, top - dy);
      }
    },
    [isMouseDown, pos],
  );
  // ...

  return (
    <S.Map ref={mapRef} onMouseMove={dragging}>
      <img draggable={false} alt="map" src={'...'} />
    </S.Map>
  );
};

 

onMouseUp (Toc)

마우스 클릭을 해제하거나 이벤트 영역을 벗어났을 때, 마우스 클릭 상태 isMouseDown을 false로 바꿀 핸들러를 정의한다. 마우스 클릭 상태가 false가 됐으니 CSS의 cursor 속성은 grab으로 돌아간다.

// Map.js
import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';

const Map = () => {
  const [isMouseDown, seIsMouseDown] = useState(false);

  const finishDrag = useCallback(({ type }) => {
    if (type === 'mouseup' || type === 'mouseleave') {
      seIsMouseDown(false);
    }
  }, []);
  // ...

  return (
    <S.Map ref={mapRef} onMouseUp={finishDrag} onMouseLeave={finishDrag}>
      <img draggable={false} alt="map" src={''} />
    </S.Map>
  );
};

 

onContextMenu (마우스 우클릭)

마우스를 우클릭했을 때의 좌표를 저장하고, 저장한 좌표 지점에 마커(이미지) 등을 추가하고 싶다면, 네이티브 이벤트에 접근해서 offsetX, offsetY 값을 저장하면 된다.

 

⚡️ offsetX, offsetY는 DOM 이벤트가 걸려 있는 엘리먼트를 기준으로 이벤트가 발생한 곳의 좌표를 출력한다. 화면에 보이지 않는 스크롤 영역까지 포함한다.

 

마우스 우클릭에 대한 이벤트는 onContextMenu 속성을 이용한다. 우클릭 후 컨텍스트 메뉴가 자동으로 나타나는데 이를 방지하려면 고유 동작을 막아주는 e.preventDefault() 메서드를 사용하면 된다.

// Map.js
import React, { useState, useRef, useCallback } from 'react';
import styled, { css } from 'styled-components/macro';
import Marker from './Maker'; // 마커 이미지 컴포넌트 import

const Map = () => {
  const [markers, setMarkers] = useState([]);
  const addMarker = useCallback(
    (e) => {
      setMarkers([
        ...markers,
        [e.nativeEvent.offsetX, e.nativeEvent.offsetY],
        // offsetX/Y: DOM 이벤트가 걸려있는 요소를 기준(화면에 보이지 않는 스크롤 영역 포함)으로 좌표 출력
      ]);
      e.preventDefault(); // 우클릭 메뉴 출력 방지
    },
    [markers, setMarkers],
  );
  // ...

  return (
    <S.Map ref={mapRef} onContextMenu={addMarker}>
      <img draggable={false} alt="map" src={''} />
      {markers.length >= 1
        ? markers.map((markerPos) => (
            <Marker key={''} left={markerPos[0]} top={markerPos[1]} />
          ))
        : null}
    </S.Map>
  );
};

 

저장한 offetX, offetY 좌표값은 자식 이미지 태그의 left, top 포지션 값으로 설정한다.

// Marker.js
import React from 'react';
import styled from 'styled-components/macro';
import markerImg from '../assets/marker.png';

const Marker = ({ left, top }) => {
  return (
    <Image
      draggable={false}
      alt="marker"
      src={markerImg}
      left={left}
      top={top}
    />
  );
};

const Image = styled.img`
  position: absolute;
  width: 60px;
  left: ${({ left }) => left}px;
  top: ${({ top }) => top}px;
`;

export default Marker;

 

 

레퍼런스

---

• Drag to scroll - HTML DOM
• 요소 사이즈와 스크롤
• 마우스 이벤트
• 브라우저 창 사이즈와 스크롤
• 좌표