7 DragDropContext-Droppable-Draggable

기본식

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

function App(){
    const onDragEnd = () => {}
    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <div>
                <Droppable droppableId="one">
                    {() => (
                        <ul>
                            <Draggable draggableId="first" index={0}>
                                {() => (
                                    <li></li>
                                )}
                            </Draggable>
                        </ul>
                    )}
                </Droppable>
            </div>
        </DragDropContext>    
    )
}

---

drag 기본식

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

import { useRecoilState } from "recoil";
import Board from "./Components/Board";

const Wrapper = styled.div`
  display: flex;
  width: 100vw;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

const Boards = styled.div`
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
`;


function App(){
const onDragEnd = () => {}
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        <Droppable droppableId="one">
          {(provided) => (
            <ul  ref={provided.innerRef} {...provided.droppableProps}>
              <Draggable draggableId="first" index={0}>
                {(provided)=>(
                  <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>first</li>
                )}
              </Draggable>
            </ul>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
}

export default App;

---