[React] drag&drop sortable 리액트 라이브러리 , react-sortable-hoc

 

 

npm install react-sortable-hoc

 

구성 요소	설명
sortableContainer	리스트 전체를 감싸는 컨테이너 (드래그 영역 설정)
sortableElement	개별 아이템을 드래그 가능한 요소로 만들어줌
onSortEnd	아이템 순서를 바꿨을 때 실행되는 콜백 함수

 

import React, { useState } from 'react';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move'; // 배열 순서를 바꿔주는 유틸

// 각 아이템을 드래그 가능하게 만드는 컴포넌트
const SortableItem = sortableElement(({ value }) => (
  <li style={{ padding: '10px', border: '1px solid gray', marginBottom: '5px' }}>{value}</li>
));

// 리스트 전체를 드래그 가능하게 감싸주는 컴포넌트
const SortableList = sortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

export default function SortableExample() {
  const [items, setItems] = useState(['하나', '둘', '셋', '넷']);

  // 순서가 바뀌었을 때 실행되는 콜백
  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(prev => arrayMove(prev, oldIndex, newIndex));
  };

  return (
    <div>
      <h2>정렬 가능한 리스트</h2>
      <SortableList
        items={items}
        onSortEnd={onSortEnd}
        axis="y"          // 세로 정렬
        pressDelay={200} // 0.2초 꾹 눌러야 드래그됨 (모바일 UX 고려)
      />
    </div>
  );
}

 

포인트	설명
index	각각의 아이템에 꼭 있어야 함. 리스트의 순서를 인식하기 위한 기준.
arrayMove	oldIndex에서 newIndex로 배열을 이동시켜주는 유틸. 직접 구현도 가능하지만 이게 제일 편함.
pressDelay	모바일 UX를 고려해 일정 시간 꾹 눌러야 드래그가 시작되게 함. 데스크탑은 없어도 OK.
axis="y"	드래그 방향 제한. "y"는 세로, "x"는 가로. 필요에 따라 고정.
lockAxis="y"	드래그 중 이동 방향을 완전히 고정. 원하지 않는 흔들림을 방지.
helperClass	드래그하는 동안 적용되는 CSS 클래스. 스타일 조절할 때 유용.
distance	드래그 시작 전 마우스를 얼마나 이동해야 드래그가 시작될지 설정. pressDelay 대체 가능.
useDragHandle	리스트의 전체가 아니라 특정 영역만 드래그 가능하게 할 수 있음. ex) 아이콘만 드래그.
shouldCancelStart	특정 조건에서 드래그를 막고 싶을 때 사용. (예: 인풋 클릭 시)

 

array-move 유틸 따로 설치 필요

npm install array-move