ReactSortable 드래그, 솔팅 기능_리액트 라이브러리

 

 

• 기반: SortableJS (vanilla JS)
• 사용 대상: React
• 역할: 드래그 & 드롭 정렬 기능을 React 방식으로 제공

npm install react-sortablejs sortablejs

 

 

🔖 기본 작동 코드 (테스트 완료)

import { useState, useEffect } from 'react';
import { ReactSortable } from 'react-sortablejs';

export default function TestSortable() {
  const [list, setList] = useState([
    { id: '1', name: '항목 1' },
    { id: '2', name: '항목 2' },
    { id: '3', name: '항목 3' },
    { id: '4', name: '항목 4' },
  ]);

  useEffect(() => {
    console.log('렌더 시 list:', list.map(i => i.id).join(','));
  }, [list]);

  return (
    <div>
      <h3>Sortable 테스트</h3>

      <ReactSortable
        list={list}
        setList={setList}
        animation={150}
      >
        {list.map(item => (
          <div
            key={item.id}
          >
            {item.name}
          </div>
        ))}
      </ReactSortable>
    </div>
  );
}

 

 

 

🔖 특정 부분에서만 드래그 및 솔팅 불가하게 하는 방법

옵션: disabled 사용

<ReactSortable
    list={list}
    setList={setList}
    animation={150}
    disabled={ 해당 조건 } ***
>