React.forwardRef()를 활용하여 컴포넌트의 드레그 앤 드롭(Swipe) 기능을 구현하는 방법에 대해 알려주세요.

10 Nov 2023

reactjs

드래그 앤 드롭(Swipe) 기능은 사용자가 화면에서 요소를 드래그하여 다른 위치로 이동시키는 기능입니다. React에서는 React.forwardRef()를 활용하여 이 기능을 구현할 수 있습니다.

React.forwardRef()란?

React.forwardRef()는 Ref를 소비하는 컴포넌트를 감싸고, 부모 컴포넌트가 자식 컴포넌트에 접근할 수 있도록 해주는 함수입니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트에게 Ref를 전달하여 자식 컴포넌트의 DOM 노드에 접근할 수 있습니다.

드래그 앤 드롭(Swipe) 컴포넌트 구현하기

먼저, 드래그 앤 드롭(Swipe) 기능을 구현할 컴포넌트를 생성합니다. 이 컴포넌트는 드래그되는 요소를 감싸고, 사용자의 드래그 동작을 감지하여 요소를 이동시키는 역할을 합니다.

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

const SwipeableComponent = React.forwardRef((props, ref) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const elementRef = useRef(null);

  const handleDragStart = (event) => {
    event.dataTransfer.setData('text/plain', ''); // 드래그 시작 시 브라우저의 기본 이벤트 막기
  };

  const handleDrag = (event) => {
    const dx = event.clientX - position.x;
    const dy = event.clientY - position.y;
    const nextX = position.x + dx;
    const nextY = position.y + dy;
    setPosition({ x: nextX, y: nextY });
  };

  const handleDragEnd = () => {
    // 드래그가 끝났을 때 요소의 위치를 업데이트
    const element = elementRef.current;
    const rect = element.getBoundingClientRect();
    const newTop = rect.top + position.y;
    const newLeft = rect.left + position.x;
    element.style.top = newTop + 'px';
    element.style.left = newLeft + 'px';
    setPosition({ x: 0, y: 0 });
  };

  return (
    <div
      ref={ref}
      style={{
        position: 'absolute',
        transform: `translate(${position.x}px, ${position.y}px)`,
      }}
      draggable
      onDragStart={handleDragStart}
      onDrag={handleDrag}
      onDragEnd={handleDragEnd}
    >
      {props.children}
    </div>
  );
});

export default SwipeableComponent;

위의 코드에서는 forwardRef를 사용하여 SwipeableComponent를 선언했습니다. 이 컴포넌트에서는 useState를 통해 드래그되는 요소의 현재 위치를 관리하고, useRef를 통해 요소의 Ref를 저장합니다. 드래그 동작은 onDragStart, onDrag, onDragEnd 이벤트를 통해 처리됩니다. 드래그가 끝났을 때는 요소의 위치를 업데이트하여 화면에 반영합니다.

사용 예시

이제 SwipeableComponent를 다른 컴포넌트에서 사용해보겠습니다. 부모 컴포넌트에서 SwipeableComponent에게 Ref를 전달하여 자식 컴포넌트의 DOM 노드에 접근할 수 있습니다.

import React, { useRef } from 'react';
import SwipeableComponent from './SwipeableComponent';

const App = () => {
  const swipeableRef = useRef(null);

  const handleSwipe = () => {
    const swipeableElement = swipeableRef.current;
    // SwipeableComponent의 DOM 노드에 접근하여 원하는 동작 수행
    // 예: 스와이프 완료 시 알림 메시지 출력
    alert('스와이프 완료!');
  };

  return (
    <div>
      <h1>Swipeable Component</h1>
      <SwipeableComponent ref={swipeableRef}>
        <div style={{ width: '200px', height: '200px', background: 'yellow' }}>
          드래그하여 움직이기
        </div>
      </SwipeableComponent>
      <button onClick={handleSwipe}>스와이프 완료</button>
    </div>
  );
};

export default App;

위의 코드에서는 SwipeableComponent를 사용하여 드래그 앤 드롭(Swipe) 기능을 구현했습니다. SwipeableComponent에 ref={swipeableRef}를 통해 Ref를 전달하고, 부모 컴포넌트에서는 swipeableRef.current를 통해 SwipeableComponent의 DOM 노드에 접근할 수 있습니다. 스와이프 완료 버튼을 클릭하면 handleSwipe 함수가 실행되어 알림 메시지를 출력하는 예시입니다.

이렇게 React.forwardRef()를 활용하여 드래그 앤 드롭(Swipe) 기능을 구현할 수 있습니다.

Conclusion

이번 글에서는 React.forwardRef()를 사용하여 컴포넌트의 드래그 앤 드롭(Swipe) 기능을 구현하는 방법에 대해 알아보았습니다. React.forwardRef()를 사용하면 부모 컴포넌트에서 자식 컴포넌트에게 Ref를 전달하여 DOM 노드에 접근할 수 있습니다. 드래그 앤 드롭 기능을 구현할 때는 React.forwardRef()를 활용하여 Ref를 전달하고, 이를 이용하여 사용자의 드래그 동작을 감지하고 요소를 이동시킬 수 있습니다. 이를 통해 사용자 친화적인 인터랙션을 구현할 수 있습니다.

더 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

React.forwardRef(): https://ko.reactjs.org/docs/forwarding-refs.html
React 드래그 앤 드롭 패키지 React DnD: https://react-dnd.github.io/react-dnd/

#react #reactjs #draganddrop #swipe