[React DnD] useDrag

  • 규격을 useDrag에 전달하면 아래 내용을 선언적으로 사용할 수 있음

  • the typeof draggable being generated
  • the itemobject representing the drag source

  • what props to collect

  • useDrag는 아래와 같은 주요항목을 return함

  • [0] - Collected Props
    • An object containing collected properties from the collect function. If no collectfunction is defined, an empty object is returned.
  • [1] - DragSource Ref
    • A connector function for the drag source. This must be attached to the draggable portion of the DOM.

  • [2] - DragPreview Ref

    • A connector function for the drag preview. This may be attached to the preview portion of the DOM.

  • useDrag에서 정의되는 부분

  • type (필수)
    • string 또는 symbol이어야 함
  • item (필수 object or function)
    • object 일 때
    • 드래그되는 데이터를 설명하는 일반적인 자바스크립트 오브젝트
    • 드롭타켓은 이 정보만 사용할 수 있으므로 필요한 최소한의 데이터만 선택하는 것이 중요
    • function 일 때
    • 드래그가 시작되면 실행되며 드래그 operation을 나타내는 객체를 반환
    • null이 반환되면 드래그 operation은 중지됨
  • previewOptions
    • 일반적인 자바스크립트 오브젝트
    • 드래그 프리뷰 옵션을 설명
  • options
    • 선택적으로 아래 속성을 포함하는 일반 객체
    • dropEffect (선택)
      • 드래그에 사용할 드롭효과 유형 ('move' or 'copy')
  • end(item, monitor)
    • 드래그가 멈추면 호출
    • monitor.didDrop()을 호출하여 호환되는 드록 타겟에서 드롭을 처리했는지 여부를 확인 가능
    • drop()method으로 드롭 결과를 지정하였다면 monitor.getDropResult()을 호출하여 사용 가능
  • canDrag(monitor)
    • 현재 드래그가 허용되는지 여부를 지정
    • 항상 허용하려면 이것을 생략하면 됨
    • 몇몇 요소에 따라 드래그를 비활성화 할 경우 사용하면 된다.
    • 이 메소드 내에서는 monitor.canDrag()를 호출할 수 없다.
  • isDragging(monitor)
    • 기본적으로 드래그를 시작한 드래그 source만 드래그로 간주한다.
    • isDragging을 정의하여 이 동작을 재정의 할 수 있다.
    • 이 메소드 내에서는 monitor.isDragging()를 호출할 수 없다.
  • collect
    • collecting 함수이다.
export const Knight: FC = () => {
  const [{ isDragging }, drag, preview] = useDrag(
    () => ({
      type: ItemTypes.KNIGHT,
      collect: (monitor) => ({  // <- 이 부분이 정의 되지 않으면 빈 배열이 반환된다.
        isDragging: !!monitor.isDragging(),
      }),
    }),
    [],
  );

  return (
    <>
      <DragPreviewImage 
        connect={preview} 
        src={knightImage} 
      />

      <div
        ref={drag} 
        style={{
          ...knightStyle,
          opacity: isDragging ? 0.5 : 1,
        }}
      >
        ♘
      </div>
    </>
  )
}

links

social