woogiereal-blog

[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>
    </>
  )
}

woogiereal-blog

Other articles

[React DnD] useDrop

useDrop은 아래와 같은 주요항목을 return함

Other articles

useDrop은 아래와 같은 주요항목을 return함

links

social