React에서 드래그 가능한 구성 요소 만들기

최신 앱에서 사용자 상호 작용이 더욱 널리 퍼짐에 따라 앱에 드래그 가능한 구성 요소를 구현하는 것이 좋을 때가 있습니다. Trello 또는 Wix와 같은 웹 사이트 빌더를 생각해 보십시오. 사용자에게 쉽고 직관적인 드래그 앤 드롭 요소가 있습니다.

여러분, 안녕하세요! 이 기사에서는 react-draggable package 을 사용하여 React에서 드래그 가능한 구성 요소를 만드는 몇 가지 간단한 방법을 설명합니다.

1단계: npm 패키지 설치

npx create-react-app my-app로 React 앱을 만든 후 다음을 실행합니다.

npm install react-draggable

2단계: 끌 수 있는 구성 요소 추가

App.js 에서 Draggable 구성 요소를 가져오기만 하면 됩니다.

import Draggable from 'react-draggable';

그런 다음 드래그할 수 있게 하려는 요소를 다음과 같이 래핑합니다.

<Draggable>
    <div className="box">
        <div>Move me around!</div>
    </div>
</Draggable>

box에 CSS를 추가할 수 있습니다.

.box {
  position: absolute;
  cursor: move;
  color: black;
  max-width: 215px;
  border-radius: 5px;
  padding: 1em;
  margin: auto;
  user-select: none;
}

그리고 그게 다야!

아주 간단하죠? 이제 끌기를 조금 더 사용자 지정하기 위해 추가할 수 있는 Draggable 구성 요소의 몇 가지 멋진 속성에 대해 논의해 보겠습니다.

1. 한 축에서 드래그

위의 예에서 볼 수 있듯이 axis 속성은 기본적으로 both로 설정되어 있어 구성 요소를 모든 방향으로 끌 수 있습니다. 설정할 수 있는 다른 값은 다음과 같습니다.

axis="x": 구성 요소를 수평으로만 끌 수 있습니다.

axis="y": 구성 요소를 수직으로만 끌 수 있습니다.

axis="none": 구성 요소를 끌 수 없습니다.

예

다음은 axis = "x"인 경우의 예입니다.

2. 드래그 가능한 위치 추적

onDrag 이벤트 핸들러는 구성 요소를 드래그할 때마다 트리거됩니다. 이를 사용하여 구성 요소의 위치를 ​​추적할 수 있습니다.

먼저 useState 후크를 가져옵니다.

import React, { useState } from "react";

그런 다음 position 상태를 초기화하여 위치를 저장합니다.

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

다음으로 position가 트리거될 때마다 onDrag를 업데이트하는 'trackPos' 기능입니다.

const trackPos = (data) => {
    setPosition({ x: data.x, y: data.y });
 };

그리고 onDrag가 트리거되면 이 함수를 호출합니다.

<Draggable onDrag={(e, data) => trackPos(data)}>
   <div className="box">
       <div>Here's my position...</div>
       <div>
            x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)}
       </div>
   </div>
</Draggable>

그리고 그 결과...

3. 핸들에서만 드래그 가능

해당 핸들에서만 드래그할 수 있도록 handle 속성을 포함할 수 있습니다. 예를 들어:

<Draggable handle="#handle">
   <div className="box">
      <span id="handle">Drag here</span>
         <div style={{ padding: "1em" }}>Cannot drag here</div>
   </div>
</Draggable>

그리고 그 결과...

결론

이 기사에서는 react-draggable과 이를 사용하여 draggable 구성 요소를 만드는 방법을 소개합니다. 또한 끌 수 있는 구성 요소를 추가로 사용자 지정할 수 있는 여러 속성 중 몇 가지에 대해서도 논의했습니다. 드래그 가능한 요소가 있으면 대화형 앱을 빌드하는 데 유용합니다. 드래그 가능한 기능을 활용하는 bulletin board app로 만든 이 미니 프로젝트를 확인하십시오. 코드는 repo을 참조하십시오.



react-draggable에 대한 자세한 내용은 설명서here를 확인하세요. 이 기사가 도움이 되었기를 바랍니다. 있다면 좋아요와 공유 부탁드립니다. 질문이 있거나 이 패키지로 만든 프로젝트를 아래 의견에 자유롭게 공유하십시오. 건배!