[JS]react-beautiful-dnd 와 오류 읽기

참고자료 링크를 들어가면 자세한 설명을 들을 수 는 있지만 빠르게 구현하기 위해 일단 코드를 치고본다.

자바스크립트로 구현하려면

npm i react-beautiful-dnd

타입스크립트로 구현하려면

npm i @types/react-beautiful-dnd

App.tsc

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

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

export default App;

DragDropContext 만 구현하면 아래와 같은 오류발생

(alias) class DragDropContext
import DragDropContext
No overload matches this call.
  Overload 1 of 2, '(props: DragDropContextProps | Readonly<DragDropContextProps>): DragDropContext', gave the following error.
    Type '{}' is missing the following properties from type 'Readonly<DragDropContextProps>': onDragEnd, children
  Overload 2 of 2, '(props: DragDropContextProps, context: any): DragDropContext', gave the following error.
    Type '{}' is missing the following properties from type 

이럴때는

Type '{}' is missing the following properties from type 'Readonly<DragDropContextProps>': onDragEnd, children

이 부분만 보면 된다 onDragEnd와 자식 컴포넌트가 빠져있다는 뜻임 따라서 onDragEnd와 자식컴포넌트를 넣어준다.

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

🎈참고자료

npm
https://www.npmjs.com/package/react-beautiful-dnd

react-beautiful-dnd 사용방법
https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd