Colin's Blog
Custom Hook을 활용한 드래그 앤 드롭 기능

드래그 앤 드롭(Drag and Drop)은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 마우스로 요소를 클릭하고 드래그하여 다른 위치로 이동시킬 수 있는 기능을 제공합니다. 이번 글에서는 Custom Hook을 활용하여 간단한 드래그 앤 드롭 기능을 구현하는 방법을 소개하겠습니다.

Custom Hook이란?

Custom Hook은 React에서 함수를 이용하여 재사용 가능한 로직을 구현하는 방법입니다. 기존의 React Hooks를 활용하여 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 관리하는 것처럼, Custom Hook은 개발자가 원하는 로직을 활용하고, 필요한 정보를 컴포넌트에 제공하는 역할을 합니다.

드래그 앤 드롭을 위한 Custom Hook 구현하기

Custom Hook을 활용하여 드래그 앤 드롭 기능을 구현하기 위해서는 다음과 같은 단계를 따릅니다.

  1. 드래그할 요소에 이벤트 핸들러를 등록하는 로직을 구현합니다. 이를 위해 onMouseDown, onMouseMove, onMouseUp 등의 이벤트를 사용합니다.
  2. 드래그의 시작, 이동 및 종료에 대한 상태를 관리하기 위해 Custom Hook을 정의합니다. 이를 위해 useState를 사용하여 상태를 관리합니다.
  3. 드래그 중인 요소의 위치를 업데이트하고, 이를 반영하여 UI를 업데이트하는 로직을 구현합니다. 이를 위해 useEffect를 사용하여 부작용을 처리합니다.

아래는 Custom Hook을 활용하여 간단한 드래그 앤 드롭 기능을 구현한 예시 코드입니다.


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

const useDragAndDrop = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = (event) => {
    setIsDragging(true);
  };

  const handleMouseMove = (event) => {
    if (!isDragging) return;
    const { clientX, clientY } = event;
    setPosition({ x: clientX, y: clientY });
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  useEffect(() => {
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, []);

  return { position, handleMouseDown };
};

const DragAndDropComponent = () => {
  const { position, handleMouseDown } = useDragAndDrop();

  return (
    <div
      onMouseDown={handleMouseDown}
      style={{ position: 'absolute', top: position.y, left: position.x }}
    >
      드래그 앤 드롭 기능 테스트
    </div>
  );
};

위 예시 코드는 useDragAndDrop이라는 Custom Hook을 정의하고, 이를 활용하는 DragAndDropComponent를 구현한 것입니다. DragAndDropComponent는 드래그 앤 드롭이 가능한 div 요소를 렌더링하며, 사용자가 요소를 드래그하면 position 상태가 업데이트되어 요소의 위치가 변경됩니다.

이제, DragAndDropComponent 컴포넌트를 적절한 곳에 렌더링하면, 간단한 드래그 앤 드롭 기능을 사용할 수 있게 됩니다.

마무리

이번 글에서는 Custom Hook을 활용하여 드래그 앤 드롭 기능을 구현하는 방법에 대해 알아보았습니다. Custom Hook은 컴포넌트 로직의 재사용성을 높여주며, 코드의 가독성과 유지보수성을 증가시킵니다. 드래그 앤 드롭 외에도 다양한 UI 인터랙션을 구현할 때 Custom Hook을 활용하여 개발 효율성을 높일 수 있습니다.

더 자세한 내용은 아래 참고 자료를 확인해주세요.

#TechBlog #React #CustomHook #드래그앤드롭

© 2018 Colin. All rights reserved.