React / Library) react-beautiful-dnd 설치 및 세팅

* 설치

 

yarn add react-beautiful-dnd

yarn add @types/react-beautiful-dnd

 

 

* 세팅

 

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";


// test array
const toDos = ["a", "b", "c", "d", "e", "f", "g"];

function App() {
  // drag가 끝났을 때 실행할 함수
  const onDragEnd = () => {};
  return (
    // DragDropContext ~ onDragEnd 필수
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
          {/* Droppable ~ droppableId 필수 */}
          <Droppable droppableId='one'>
            {/* Droppable에는 제공되는 props 존재-> children에 설정 */}
            {(provided) => (
              <ul ref={provided.innerRef} {...provided.droppableProps}>
                {toDos.map((todo, index) => (
                  // Draggable ~ draggableId, index 필수. draggableId와 key는 같아야 함.
                  <Draggable draggableId={todo} index={index} key={todo}> 
                    {/* Draggable에는 제공되는 props 존재-> children에 설정 */}
                    {(provided) => (
                      <li
                        ref={provided.innerRef}
                        // 아래 2개의 props가 모두 있어야 요소를 컨트롤할 수 있다.
                        {...provided.draggableProps} // controls the movement of the draggable
                        {...provided.dragHandleProps} // drag handle
                      >
                        {todo}
                      </li>
                    )}
                  </Draggable>
                ))}
                {/* drag할 때, droppable의 영역이 변하지 않게 설정 */}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
      </div>
    </DragDropContext>
  );
}

export default App;

 

 

 

---

참고)

 

- https://github.com/atlassian/react-beautiful-dnd/tree/1a380855d0d008c5d6ef8e34c7c8ffb96c66a881

- https://five-fruits-coding.tistory.com/entry/React-TS-Theme-%EC%84%B8%ED%8C%85-Theme-Provider