패스트캠퍼스/자습

Antd Table drag & drop Typescript로 구현하기

sunnykim91 2020. 5. 27. 16:00

 

 글을 쓰다보니까 정말.. Antd에 대한 얘기밖에 없는것 같다.... ㅋㅋㅋㅋㅋ 

 그만큼 Antd에 대해서 많이 찾아보고 삽질하고 엄청 하고 있다...하.. 너무 힘듬... 진짜 이번엔 오류잡아내기가 너무 빡셌음 그럼 바로 본론으로 고고!!

 

 

 

안트디자인 ,Ant Design 에 보면 위와 같이 Drag sorting 이라는 것이 있다. 

위에는  사진이라서 잘모르겠다면, https://ant.design/components/table/#header

 

Table - Ant Design

 

ant.design

여기 들어가서 한번 확인해보시길 

 

여튼 어디서 봤을것이다. 테이블을 만들고 순서를 바꾸고 싶을때 적용하는 것이다.

 

되게 간단할 줄 알았는데 Antd Table이 기존에 적용되어있는 만큼 ! 한번 써보기로 하였다.

 

일단! 나는 Typesciprt를 사용하기 때문에 줸장 Antd홈페이지에 나와있는대로 코드를 치면 오류가 난다.

 

첫번째 오류나는 부분

const DragableBodyRow = ({
  index,
  moveRow,
  className,
  style,
  ...restProps
}) => {
  const ref = React.useRef();
  const [{ isOver, dropClassName }, drop] = useDrop({
    accept: type,
    collect: (monitor) => {
      const { index: dragIndex } = monitor.getItem() || {};
      if (dragIndex === index) {
        return {};
      }
      return {
        isOver: monitor.isOver(),
        dropClassName:
          dragIndex < index ? " drop-over-downward" : " drop-over-upward",
      };
    },
    drop: (item: any) => {
      moveRow(item.index, index);   // 요부분
    },
  });
  const [, drag] = useDrag({
    item: { type, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  drop(drag(ref));
  return (
    <tr
      ref={ref}
      className={`${className}${isOver ? dropClassName : ""}`}
      style={{ cursor: "move", ...style }}
      {...restProps}
    />
  );
};

가운데 보면 요부분이라고 주석처리되어있는 부분이다.

item.index에 대한 오류가 나는 부분인데... 어케 할지 막막했었는데 TS 오류는 타입오류라는 생각으로 여기저기 any를 넣엇다(이러면안되지만 ㅠㅠ 해결책을 모르겠는걸..구글링도 안나오고...)

그래서 그 위에줄을 보면 item:any 라고 되어있는 것이 보일것이다. 이렇게 말끔히 해결!!

 

 

두번째 오류

<DndProvider backend={HTML5Backend}>
	<Table
      columns={columns}
      dataSource={this.state.data}
      components={this.components}
      onRow={(record, index) => ({     // 이부분 오류
    	  index,
     	  moveRow: this.moveRow,
      })}
  	/>
</DndProvider>

 

아마 onRow부분에서 오류가 날것이다. 이부분도 어케 해야할지 또 막막했다. onRow={}이 중괄호안을 몇십번 바꿨다...후... ㅠㅠㅠㅠㅠ

그렇게 삽질 끝에 알아낸 것은 단순하게 

 

onRow={(record, index): any => ({
  index,
  moveRow: this.moveRow,
})}

또 뒤에 any를 붙이는 일....소름... 젠장... ㅋㅋㅋㅋㅋㅋ

 

이렇게 사실 any도배하면 안좋아요!! (Typescript쓰는 의미없음..) 하지만, 난 이제 2개월차 개발자일 뿐이고... 일단 돌아갔으면 좋겠을 뿐이고 ㅠㅠ ...

 

둘다 해결하고 나면 잘 작동이 될 것이다.

 

만약 작동하지 않는다면, 처음에 !

npm이나 yarnd을통해서 설치를 했는지 확인하기!!

 

기본적으로

위에 import되어있는

import { DndProvider, useDrag, useDrop } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

이 3개는 설치해줘야한다.

나는 yarn 이기 때문에 

yarn add react-dnd react-dnd-html5-backend immutability-helper

 

이렇게 설치해야한다. (npm은 npm install ~~~) 하시면되용

 

 

이것도 설치했는데 안되면.. 다른 문제일테니 댓글달아주세요~~ ㅎㅎㅎㅎ

 

 

 

반응형