Suspense를 사용하여 요소의 드래그 액션을 지연시키는 방법은?

07 Nov 2023

suspense

일반적으로 요소의 드래그 액션은 즉시 반응하는 것이 기본입니다. 그러나 때로는 드래그 액션을 일정 시간 동안 지연시켜야 할 때도 있습니다. 이를 위해 React 라이브러리의 Suspense 기능을 활용할 수 있습니다. Suspense는 컴포넌트의 렌더링을 지연시키는 역할을 합니다.

아래는 Suspense를 사용하여 요소의 드래그 액션을 지연시키는 방법에 대한 예시 코드입니다.

import React, { useState, useEffect, Suspense } from 'react';

const DraggableElement = React.lazy(() => import('./DraggableElement'));

const DragWithDelay = () => {
  const [isDragging, setDragging] = useState(false);

  useEffect(() => {
    let timer;

    const handleDragStart = () => {
      timer = setTimeout(() => {
        setDragging(true);
      }, 1000); // 드래그 액션을 1초 동안 지연시킴
    };

    const handleDragEnd = () => {
      clearTimeout(timer);
      setDragging(false);
    };

    document.addEventListener('dragstart', handleDragStart);
    document.addEventListener('dragend', handleDragEnd);

    return () => {
      document.removeEventListener('dragstart', handleDragStart);
      document.removeEventListener('dragend', handleDragEnd);
    };
  }, []);

  return (
    <div>
      {isDragging ? (
        <Suspense fallback={<div>Loading...</div>}>
          <DraggableElement />
        </Suspense>
      ) : (
        <div>Drag element with delay</div>
      )}
    </div>
  );
};

export default DragWithDelay;

위의 코드에서는 DraggableElement 컴포넌트를 Suspense 컴포넌트로 감싸고 있습니다. isDragging 상태가 true일 때에만 Suspense가 활성화되어 DraggableElement 컴포넌트가 렌더링됩니다. 그렇지 않을 경우엔 일반적인 드래그 메시지가 표시됩니다.

또한, useEffect 훅을 사용하여 dragstart 이벤트가 발생할 때 드래그 액션을 1초 동안 지연시키도록 설정하였습니다. dragend 이벤트가 발생하면 타이머를 취소하고 드래그 액션을 멈춥니다.

위 예시 코드는 React를 기반으로 작성되었으며, Drag and Drop 액션이 발생하는 환경에서 사용할 수 있습니다.

#Reference React Suspense 문서