[React DnD] useDrop

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

  • [0] - Collected Props
    • An object containing collected properties from the collect function. If no collectfunction is defined, an empty object is returned.

  • [1] - DropTarget Ref

    • A connector function for the drop target. This must be attached to the drop-target portion of the DOM.

  • useDrop에서 정의되는 부분

  • accept (필수)
    • string 또는 symbol이어야 함
  • options
    • 컴포넌트의 몇몇 props가 primitive values 또는 functions 아닌 경우 사용
    • arePropsEqual(props, otherProps)를 사용하여 성능을 향상시킬 수 있다.
    • 성능에 문제가 없으면 고려할 필요 없음
  • drop(item, monitor)
    • 호환되는 대상이 타겟에 drop되면 호출
    • 어떤 target에 drop source를 drop했는지에 따라 다른 작업을 수행하려는 경우 유용
    • 중첩된 드롭 target이 있는 경우, monitor.didDrop()과 monitor.getDropResult()를 체크하여 중첩된 target이 처리 했는지를 테스트 할 수 있다.
    • canDrop()이 정의되어있고 false를 return할 경우 호출되지 않음
  • hover(item, monitor)
    • drop source가 요소위에 hover되면 호출된다.
    • monitor.isOver({ shallow: true })로 체크하여 현재 target 또는 중첩된 target에서 발생하는지 테스트할 수 있다.
    • drop()고 다르게 canDrop()이 정의되어있고 false를 return할 경우에도 호출된다.
    • monitor.canDrop()을 확인하여 해당 여부를 테스트 할 수 있다.
  • canDrop(item, monitor)
    • drop target이 drop source를 accept할 수 있는지 여부를 지정
    • 항상 허용할 경우 생략하면 됨
    • 몇몇 props나 monitor.getItem()에 따라 drop을 비활성화할 경우에 유용
    • 이 메소드내에서는 monitor.canDrop()을 호출할 수 없음
  • collect
    • collecting 함수이다.
const [{ isOver, canDrop }, drop] = useDrop(
    () => ({
      accept: ItemTypes.KNIGHT,
      canDrop: () => game.canMoveKnight(x, y),
      drop: () => game.moveKnight(x, y),
      collect: (monitor) => ({
        isOver: !!monitor.isOver(),
        canDrop: !!monitor.canDrop()
      })
    }),
    [game]
  );

links

social