TRELLO Clone #2 React-beautiful-dnd

React-beautiful-dnd

• 🚩 https://github.com/LeeHyungGeun/react-beautiful-dnd-kr
• Raeact 에서 손쉽게 drag and drop 기능을 만들기 위한 라이브러리
• 설치

npm i react-beautiful-dnd
npm i --save-dev @types/react-beautiful-dnd

• todo, doing, done 리스트를 마우스 드래그 앤 드롭으로 움직일 수 있게 구현하기 위해 사용!

---

DragDropContext

• DragDropContext은 Drag and Drop이 일어나는 전체영역.

• Droppable, Dragpable 이 지정된 영역을 포함 하고 있어야하며,
  유저가 드래그를 끝낸 시점에 불려지는onDragEnd={} 함수를 필수로 가지고 있어야한다.

• 사용

{ import { DragDropContext } from "react-beautiful-dnd";

function App() {
	const onDragEnd = (...) => {...};
	return (
    	<DragDropContext onDragEnd={onDragEnd}>
        	...
    	</DragDropContext>
    )
}

Droppable

• Drop할 수 있는 영역(Drop이 이루어지는 영역)

• 유저가 드롭할 수 있는 영역이 여러개일 수 있으므로,
  고유한 값을 가지고 있는 droppableId prop을 필수로 가지고 있어야 한다.

• Droppable 의 children 은 react 요소이면 안되며, 함수여야한다.

• 사용

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

function App() {
	const onDragEnd = (...) => {...};
	return (
    	<DragDropContext onDragEnd={onDragEnd}>
        	<Droppable droppableId="one">
				{() => <ul></ul>}
            </Droppable>
    	</DragDropContext>
    )
}

Draggable

• Drag가 일어나는 요소(item).
• Drag이벤트가 시작되면 DragDropContext 바인딩 된 onDragStart={...}가 동작한다.
• 움직일요소들이 가지는 고유값 draggableId, index prop 을 필수로 가진다.
• 사용

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

function App() {
	const onDragEnd = (...) => {...};
	return (
    	<DragDropContext onDragEnd={onDragEnd}>
        	<Droppable droppableId="one">
				{() => 
                	<ul>
                		<Draggable draggableId="first" index={0}>
                        	{() => <li>One</li>}
                        </Draggable>
                		<Draggable draggableId="second" index={1}>
                        	{() => <li>Two</li>}
                        </Draggable>                     
                	</ul>}
            </Droppable>
    	</DragDropContext>
    )
}

• 여기까지가 기본적인 셋팅이다. 당연히 아무런 기능은 안함.

Provided

• droppable,draggable 의 첫번째 매개변수, provided
• provided.innerRef를 참조하여 동작을 실행하는 매개변수 이기에
  필수 매개변수로 들어가야한다.
  • droppable
    
  • draggable
    

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

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

• one 을 Drag 하는 중 ... ㅋㅋ
• 임시 데이터 값을 사용해서 스타일을 약간 줘보자

const toDos = ["a", "b", "c", "d", "e", "f"];

• 여기까지 완성은 했으나
• 리스트 중 한 개의 아이템이 나가면 리스트가 작아지거나 커지는 문제가 발생.
• 크기를 고정하기 위해 Droppable 의 provided 매개변수의 안에 있는 placeholder 를 사용해주자.

placeholder

• Draggable 엘리먼트를 drag하는 동안 position: fixed(영역을 고정시킴)를 적용한다.

• Draggable을 드래그할 때 Droppable 리스트가 작아지는 것을 방지하기 위해 필요하다.

• 최종 코드

function App() { 
  const onDragEnd = () => {...};
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Wrapper>
        <Boards>
          <Droppable droppableId="one">
            {(magic) => (
              <Board ref={magic.innerRef} {...magic.droppableProps}>
                {toDos.map((toDo, index) => (
                  <Draggable draggableId={toDo} index={index}>
                    {(magic) => (
                      <Card
                        ref={magic.innerRef}
                        {...magic.dragHandleProps}
                        {...magic.draggableProps}
                      >
                        {toDo}
                      </Card>
                    )}
                  </Draggable>
                ))}
                {magic.placeholder}
              </Board>
            )}
          </Droppable>
        </Boards>
      </Wrapper>
    </DragDropContext>
  );
}