React DND 참고

[taetaeo]

React-dnd

핵심은 Drug & Drop

1. useDrag

const [Collected Props, DragSource Ref,  DragPreview Ref] = useDrag(spec, deps)

1. spec : 사양 개체 또는 사양 개체를 생성하는 함수

2. deps : 메모이제이션에 사용되는 종속성 배열이며 내장된 useMemo의 React 후크처럼 동작합니다. 기본값은 함수 사양의 경우 빈 배열이고 개체 사양의 경우 사양을 포함하는 배열입니다.

3. Collected Props : 수집 기능에서 수집된 속성을 포함하는 개체로서 함수가 정의 되지 않은 경우 collect빈 객체가 반환됩니다.

4. DragSource Ref : 드래그 소스에 대한 커넥터 기능으로 DOM의 드래그 가능한 부분에 연결되어야 합니다.

5. DragPreview Ref: 드래그 프리뷰용 커넥터 기능으로 DOM의 미리보기 부분에 첨부될 수 있습니다.

2. useDrop

const [collectedProps, DropTarget Ref] = useDrop(specArg, deps?)

1. spec : 사양 개체 또는 사양 개체를 생성하는 함수

2. deps : 메모이제이션에 사용되는 종속성 배열이며 내장된 useMemo의 React 후크처럼 동작합니다. 기본값은 함수 사양의 경우 빈 배열이고 개체 사양의 경우 사양을 포함하는 배열입니다.

3. Collected Props : 수집 기능에서 수집된 속성을 포함하는 개체로서 함수가 정의 되지 않은 경우 collect빈 객체가 반환됩니다.

4. DropTarget Ref : 놓기 대상에 대한 커넥터 기능입니다. DOM의 놓기 대상 부분에 연결되어야 합니다.

보통 사용

const [collectedProps, drop] = useDrop(() => ({accept}))

1. accept: 지정한 유형에 대해서 드래그 소스를 반응하도록 함.
2. drop(item, monitor)? : 호환되는 항목이 대상에 떨어질 때 호출
3. collect : 구성 요소에 삽입하기 위해 반환할 props의 일반 개체를 반환해야 합니다.

참고

React Dnd 공식문서 : https://react-dnd.github.io/react-dnd/docs/api/use-drag