[React] react-beautiful-dnd

bomhada·2022년 4월 8일

React kanban board

📘 React study

목록 보기

9/15

react-beautiful-dnd

React로 아름답고 접근성이 좋은 드래그 앤 드롭 리스트를 만들 수 있도록 도와주는 패키지 입니다.

설치

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

DragDropContext

DragDropContext는 기본적으로 드래그앤드롭을 가능하게 하고 싶은 앱의 한 부분입니다.
그리고 자식 요소가 필수로 들어가야합니다.

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

function App() {
  return(
    <DragDropContext>
      <div></div>
    </DragDropContext>
  );
}

export default App;

onDragEnd

onDragEnd는 함수는 필수 prop으로 유저가 드래그를 끝낸 시점에 불려지는 함수 입니다.

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

function App() {
  const onDradEnd = () => {
  };
  return(
    <DragDropContext onDradEnd={onDradEnd}>
      <div></div>
    </DragDropContext>
  );
}

export default App;

result: DropResult
result.draggableId: 드래그 되었던 Draggable의 id.
result.type: 드래그 되었던 Draggable의 type.
result.source: Draggable이 시작된 위치(location).
result.destination: Draggable이 끝난 위치(location). 만약에 Draggable이 시작한 위치와 같은 위치로 돌아오면 이 destination 값은 null이 될것입니다.

Droppable

이 영역은 어떤 것을 드롭할 수 있는 영역을 말합니다.
그리고 Drappable은 DrappableId이라 prop을 넣어줘야하고,
함수 형식의 자식요소를 넣어줘야합니다.

import {DragDropContext, Drappable} from 'react-beautiful-dnd';

<DragDropContext onDradEnd={onDradEnd}>
  <div>
    <Drappable drappableId="one">
    { (magic) =>
      <ul ref={magic.innerRef} {...magic.droppableProps}></ul>
    }
    </Drappable>
  </div>
</DragDropContext>

placeholder

Draggable 엘리먼트를 드래그 하는 동안 position: fixed를 적용시켜줍니다.
placeholder를 넣지 않을 시 Draggable을 드래그 할 때 Droppable 리스트의 크기가 작아지는 것을 방지해줍니다.
placeholder 삽입 위치는 Draggable 노드의 형제로 렌더링하는 것이 좋습니다.

useRef()

useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.
반환된 객체는 컴포넌트의 전 life cycle을 통해 유지될 것입니다.
일반적인 사용 사례는 자식에게 접근하는 경우입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.

ref속성보다 useRef()가 더 유용합니다. 이 기능은 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다.

Draggable

이 영역은 사용자가 드래그를 할 수 있는 영역을 말합니다.
역시 Draggable 컴포넌트도 함수 형식의 자식요소를 넣어줘야합니다.
Deaggable 컴포넌트에는 DraggableProps과 DragHandleProps props를 가지고와 사용할 수 있습니다.
그 중 DragHandleProps는 특정 영역을 통해서만 드래그를 가능하도록 하고싶을 때 사용합니다.

import {DragDropContext, Drappable} from 'react-beautiful-dnd';

const lists = ['a','b','c','d','e','f',];

<DragDropContext onDradEnd={onDradEnd}>
  <div>
    <Drappable drappableId="one">
    {(magic) =>
      <ul ref={magic.innerRef} {...magic.droppableProps}>
        {lists.map((list, index) => 
          <Draggable draggableId={list} index={index} key={toDo}>
          {(magic) =>
            <li
              ref={magic.innerRef}
              {...magic.draggableProps}
              {...magic.dragHandleProps}
            >
              {list}
            </li>
          }
        </Draggable>
        )}
        {magic.placeholder}
      </ul>
    }
    </Drappable>
  </div>
</DragDropContext>

key

React JS에서 li태그를 사용할 때 꼭 key값을 넣어달라는 경고 표시를 보게 되는데,
beautiful dnd를 사용할 때 key는 list 내에서 고유해야 하는데 index값을 줘도 해결이 되지 않습니다.
일반적으로 draggableId를 key로 사용하면 됩니다.
⚠️ list에 key가 없으면 React가 경고하지만 index를 key로 사용하는 경우 경고하지 않습니다.