React는 유명한 사용자 인터페이스(UI) JavaScript 라이브러리입니다. React 라이브러리를 사용하여 소셜 미디어 앱, 전자 상거래 플랫폼, 블로그, 단일 페이지 애플리케이션, 콘텐츠 관리 시스템(CMS), 대시보드, 데이터 시각화 등 다양한 종류의 웹 앱을 만들 수 있습니다.
개발자는 다양한 라이브러리와 프레임워크를 사용하여 React 앱의 기능을 확장할 수 있습니다. 이러한 라이브러리는 여러 클래스로 그룹화할 수 있습니다. 끌어서 놓기는 매우 인기 있는 라이브러리 범주입니다.
끌어서 놓기 기능은 사용자가 화면에서 요소를 클릭/선택하고 끌어서 다른 구성 요소에 놓을 수 있는 UI 상호 작용입니다. 이 기능의 완벽한 예는 항목을 원하는 위치로 드래그 앤 드롭하여 목록의 항목을 재정렬하는 것입니다.
다음과 같은 경우에도 드래그 앤 드롭 기능을 사용할 수 있습니다.
- 파일 업로드: 사용자는 파일을 선택하고 업로드하기 위해 컴퓨터를 스크롤하는 대신 파일을 끌어다 놓을 수 있습니다.
- Kanban 보드: 사용자가 활동 수준이나 단계에 따라 항목을 끌어다 놓을 수 있는 대시보드를 만들 수 있습니다.
- 이미지 갤러리: 사용자가 이미지를 업로드하고 재정렬할 수 있는 이미지 갤러리를 가질 수 있습니다.
- 위젯: 사용자는 위젯을 드래그 앤 드롭하여 앱의 모양을 사용자 지정할 수 있습니다.
- 장바구니: 사용자는 항목을 클릭하고 장바구니에 끌어다 놓을 수 있습니다.
React 드래그 앤 드롭 라이브러리는 개발자가 React 애플리케이션에서 드래그 앤 드롭 기능을 구현할 수 있도록 하는 사전 구축된 구성 요소 집합입니다.
이러한 라이브러리는 재사용 가능한 구성 요소와 함께 제공되므로 개발자가 끌어서 놓을 수 있는 요소를 만들 수 있습니다. 라이브러리는 끌기 시작, 끌기 입력, 끌기 떠나기 및 놓기와 같은 다양한 이벤트를 처리합니다.
목차
드래그 앤 드롭 라이브러리가 더 나은 UI 상호 작용에 도움이 되는 방법
- 향상된 사용자 경험: 끌어서 놓기 기능은 사용자가 응용 프로그램과 상호 작용할 수 있는 직관적인 접근 방식입니다. 항목을 수동으로 입력하는 대신 끌어서 놓는 옵션은 상호 작용하고 원활한 상호 작용을 제공합니다.
- 단순화된 워크플로: 컴퓨터의 다른 위치에서 응용 프로그램으로 파일을 업로드하는 대신 끌어서 놓기만 하면 됩니다.
- 생산성 향상: 끌어서 놓기 기능으로 시간을 절약하고 사용자의 생산성을 높일 수 있습니다.
- 모바일 장치에 적합: 스마트폰 및 태블릿과 같은 모바일 장치는 화면 공간이 제한되어 있습니다. 사용자는 대부분 탐색을 위해 제스처에 의존하므로 드래그 앤 드롭이 멋진 추가 기능이 됩니다.
- 매력적인 인터페이스 제공: 끌어서 놓기 기능은 앱의 사용자 인터페이스에 시각적 매력을 더할 수 있습니다. 피드백을 제공하거나 사용자가 앱에서 항목을 끌어다 놓을 때 동작을 설명하는 애니메이션을 추가할 수 있습니다.
다음은 최고의 드래그 앤 드롭 반응 라이브러리입니다.
반응 DnD
React DnD는 복잡한 드래그 앤 드롭 인터페이스를 구축하기 위한 일련의 React 유틸리티입니다. 이 라이브러리는 끌어서 놓기 기능에 데이터 전송도 포함되는 Trello 및 Storify와 유사한 앱을 만드는 데 적합합니다.
설치;
npm install react-dnd react-dnd-html5-backend
다음과 같이 React DnD를 React 구성 요소로 가져올 수 있습니다.
import { useDrag } from 'react-dnd'
주요 특징들
- 구성 요소와 함께 작동: 이 라이브러리는 이미 만들어진 위젯을 제공하지 않습니다. 그러나 구성 요소를 래핑하고 소품을 주입합니다.
- 확장 가능: React DnD 라이브러리를 사용할 때 마우스 이벤트 또는 터치 이벤트를 기반으로 사용자 지정 백엔드를 추가할 수 있습니다.
- 테스트 가능: Jest 또는 Enzyme을 사용하여 React DnD 코드를 테스트할 수 있습니다.
- 터치 지원: React DnD 터치 백엔드는 이 라이브러리에 터치 기능을 추가합니다.
React DnD는 무료 오픈 소스 라이브러리입니다.
반응 드래그 가능
React Draggable은 간단하면서도 강력한 React 라이브러리로 드래그 가능한 요소를 쉽게 만들 수 있습니다.
설치;
npm 설치 반응 드래그 가능
React Draggable을 사용하려면 React 구성 요소에서 다음과 같이 가져옵니다.
import Draggable from 'react-draggable';
특징
- 손쉬운 설치 및 구성: 시작하려면 라이브러리를 설치하고 가져오기만 하면 됩니다. 라이브러리에서 개별 구성 요소를 가져올 수도 있습니다.
- 바닐라 JavaScript 및 React와 호환: 다음과 같이 일반 JavaScript와 함께 React Draggable을 사용할 수 있습니다.
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- 다른 React 라이브러리와 호환: React Draggable을 React Grid Layout과 같은 다른 라이브러리와 함께 사용할 수 있습니다.
React Draggable은 무료 오픈 소스 Drap and Drop React 라이브러리입니다.
리액트 드롭존
React Dropzone은 파일에 대한 HTML-5 호환 드래그 앤 드롭 영역을 생성하기 위한 간단한 React Hook입니다.
설치;
npm install –react-dropzone 저장
또는:
실 추가 react-dropzone
그런 다음 다음과 같이 이 라이브러리를 가져올 수 있습니다.
import {useDropzone} from 'react-dropzone';
특징
- 스타일링 Dropzone: 이 라이브러리는 스타일 지정 규칙을 설정하지 않으므로 적절하다고 생각되는 구성 요소의 스타일을 지정할 수 있습니다.
- 사용자가 허용 가능한 파일 유형을 정의하도록 허용: 수락 소품을 제공하여 Dropzone이 특정 파일 유형을 수락하거나 거부하도록 지시할 수 있습니다.
- 사용자 지정 유효성 검사 수락: validator 소품을 사용하면 다른 파일에 대한 사용자 지정 유효성 검사를 지정할 수 있습니다.
React Dropzone은 무료 오픈 소스 드래그 앤 드롭 React 라이브러리입니다.
반응 그리드 레이아웃
React Grid Layout은 크기 조정 및 드래그가 가능한 React용 그리드 레이아웃입니다.
설치;
npm 설치 react-grid-layout
다음과 같이 이 라이브러리를 가져올 수 있습니다.
import GridLayout from "react-grid-layout";
특징
- 종속성 없음: React Grid Layout은 순수하게 React를 기반으로 구축되었으며 JQuery가 없습니다.
- 크기 조정 가능한 위젯: 끌어서 놓기 기능 외에도 구성 요소의 크기를 조정할 수도 있습니다.
- 반응형 중단점: 라이브러리는 모든 중단점에 대해 별도의 레이아웃을 제공합니다.
- 사용자 지정 가능: 전체 그리드를 다시 빌드하지 않고 위젯을 추가하거나 제거할 수 있습니다.
React Grid Layout은 무료 오픈 소스 React 라이브러리입니다.
리액트
React rnd는 드래그 및 크기 조정이 가능한 React용 구성 요소입니다.
설치;
npm i -S 반응-rnd
또는
원사 추가 react-rnd
특징
- 단순함: React rnd는 단순하지만 매우 강력하도록 설계되었습니다.
- TypeScript 및 JavaScript와 모두 호환: JavaScript 또는 TypeScript로 구성했는지 여부에 관계없이 앱에서 React rnd를 사용할 수 있습니다.
- 크기 조정 지원: React rnd를 사용하여 만든 구성 요소의 크기를 필요에 맞게 쉽게 조정할 수 있습니다.
React rnd는 무료 오픈 소스 React 라이브러리입니다.
가상화된 dnd 반응
React Virtualized dnd는 가상화 스크롤바가 내장된 드래그 앤 드롭 React 프레임워크입니다.
설치;
npm 설치 – react-virtualized-dnd 저장
React Virtualized dnd를 다음과 같이 가져올 수 있습니다.
import ExampleBoard from 'react-virtualized-dnd';
특징
- 선택할 수 있는 다양한 구성 요소: 구성 요소는 “고정 높이”, “가변 높이” 및 “그룹화 가능한 Droppables”로 그룹화됩니다.
- 사용자 지정 가능: React Virtualized dnd의 구성 요소를 필요에 맞게 사용자 지정할 수 있습니다.
React Virtualized dnd는 소스 코드가 GitHub에서 호스팅되는 오픈 소스 React 프레임워크입니다.
무버블 리액트
React Movable은 목록 및 테이블을 위한 드래그 앤 드롭 React 라이브러리입니다.
설치;
원사 추가 반응 이동 가능
이 라이브러리를 다음과 같이 가져올 수 있습니다.
import { List, arrayMove } from 'react-movable';
특징
- 선택할 수 있는 다양한 끌어서 놓기 옵션: 라이브러리에는 선택할 수 있는 다양한 유형의 끌어서 놓기 구성 요소에 대한 상용구 코드가 있습니다.
- 경량 라이브러리: React Movable에는 JQuery와 같은 종속성이 없습니다. 4kB 미만입니다(gzipped).
- 독선적인 스타일링: React Movable은 앱의 스타일을 지정하는 방법을 제어하지 않습니다.
- 터치 지원: 이 라이브러리는 스마트폰, 태블릿 및 터치 기능이 있는 모든 장치에서 사용할 수 있는 앱을 만드는 데 도움이 됩니다.
- TypeScript로 작성: JavaScript에서 사용할 수 없는 기능인 코드에 유형을 도입할 수 있습니다.
React Movable은 무료 오픈 소스 React 라이브러리입니다.
드래그 가능
Draggable은 개발자가 네이티브 브라우저 이벤트를 포괄적인 API로 추상화하여 드래그 앤 드롭 이벤트를 생성할 수 있는 드래그 앤 드롭 React 라이브러리입니다.
설치;
npm install @shopify/draggable – 저장
또는 원사를 통해:
원사 추가 @shopify/드래그 가능
다음과 같이 Draggable을 React 앱으로 가져올 수 있습니다.
import { Draggable } from '@shopify/draggable';
특징
- 분류된 구성 요소: 구성 요소가 분류되어 있으므로 사용할 정확한 구성 요소를 쉽게 찾을 수 있습니다. 이러한 구성 요소는 사용자 정의할 수 있습니다.
- 주요 브라우저와 호환: Google Chrome, Mozilla Firefox 및 Apple Safari와 같은 브라우저에서 Draggable을 사용할 수 있습니다.
- TypeScript 지원: 이 라이브러리로 작업할 때 코드에 TypeScript 정의를 추가할 수 있습니다.
- 플러그인 지원: Collidable 및 SwapAnimation과 같은 플러그인을 사용하여 Draggable의 기능에 추가할 수 있습니다.
Draggable은 기여자가 유지 관리하는 무료 오픈 소스 React 라이브러리입니다.
반응 드래그하여 선택
React 드래그 투 선택은 애플리케이션에 드래그 투 선택 기능을 추가하는 데 사용할 수 있는 React 라이브러리입니다.
설치;
npm install –save @air/react-drag-to-select
또는
원사 추가 @air/react-drag-to-select
다음과 같이 이 라이브러리를 앱으로 가져올 수 있습니다.
import { useSelectionContainer } from '@air/react-drag-to-select'
특징
- 단순: 이 라이브러리는 항목을 선택하지 않습니다. 그러나 라이브러리는 선택 상자를 그리고 좌표를 제공합니다.
- TypeScript 지원: React Drag-to-select 라이브러리는 TypeScript로 작성되었으므로 TypeScript 및 JavaScript로 작성된 React 앱과 함께 사용할 수 있습니다.
- 테스트 지원: 대부분의 React 테스트 프레임워크에서 이 라이브러리를 사용할 수 있습니다.
React Drag-to-select는 무료 오픈 소스 라이브러리입니다.
리액트 드라굴라
React Dragula는 간단한 드래그 앤 드롭 React 라이브러리입니다.
설치;
npm 설치 react-dragula –save
또는,
정자 설치 react-dragula –save
특징
- 사용자 지정 가능: React Dragula의 구성 요소를 필요에 맞게 사용자 지정할 수 있습니다.
- 터치 지원: 이 라이브러리를 사용하여 스마트폰, 태블릿 및 기타 터치 장치에서 사용할 수 있는 앱을 만들 수 있습니다.
- 경량: React Dragula는 번들 크기가 작기 때문에 React 앱을 작게 만들고 싶을 때 적합합니다.
React Dragula는 무료 오픈 소스 라이브러리입니다.
결론
이제 다음 React 애플리케이션에서 사용할 수 있는 다양한 드래그 앤 드롭 라이브러리가 있습니다. 라이브러리 선택은 다음 앱, 취향 및 기본 설정에 포함하려는 기능에 따라 달라집니다.
앱이 큰 경우 여러 개의 끌어서 놓기 라이브러리를 사용하여 다양한 요구 사항을 충족할 수 있습니다. 이러한 라이브러리의 대부분은 다양한 React 테스트 라이브러리와 호환되므로 오류 없는 애플리케이션을 쉽게 배송할 수 있습니다.