[React][라이브러리] react-rnd를 활용해서 Drag & Drop 구현하기

 

# 소개

React 애플리케이션에서 Drag & Drop 기능을 구현할 때, react-rnd 라이브러리를 사용하면 쉽고 빠르게 구현할 수 있습니다. Drag & Drop 기능을 구현할 수 있는 다른 좋은 React 라이브러리들도 많지만, 만약 Resize가 꼭 필요하고, 별다른 학습 없이 바로 구현하고 싶다면, react-rnd가 좋은 선택일 것입니다. 본 포스팅에서는 이 라이브러리를 이용하여 Drag & Drop 기능을 구현하는 방법을 알아보겠습니다.

 

# react-rnd 설치

yarn add react-rnd

 

# 구현 방법

react-rnd를 사용하여 React Drag & Drop 기능을 구현하는 방법은 매우 간단합니다. 먼저 react-rnd 라이브러리를 설치하고, 사용할 컴포넌트에 Resizable and Draggable 기능을 추가해주면 됩니다. 예를 들어, 드래그하여 위치 이동할 수 있는 div 요소를 만드는 방법은 다음과 같습니다.

import React from 'react';
import Rnd from 'react-rnd';

class DraggableDiv extends React.Component {
  render() {
    return (
      <Rnd
        default={{
          x: 0,
          y: 0,
          width: 320,
          height: 200,
        }}
      >
        <div>Drag me!</div>
      </Rnd>
    );
  }
}

위 예제에서 Rnd 컴포넌트는 default props를 통해 초기 위치(x, y)와 크기(width, height)를 설정합니다. 다른 Drad & Drop 라이브러리에 비해서 구현 난이도가 가장 낮다는 것이 큰 장점입니다. 물론 위의 예시세 포함되지 않은, 콜백들과 파라미터들을 제공하므로 추가적인 기능들이 필요하신 경우 이 링크를 참고하시면 될 것 같습니다.

# 결론

react-rnd 라이브러리를 사용하면 React 애플리케이션에서 Drag & Drop 기능을 쉽고 빠르게 구현할 수 있습니다. Drag& Drop 기능을 지원해야 하는 구조가 복잡하지 않고, 위치 이동 및 크기 변경 정도의 기능을 제공하고 싶은 경우라면, 간단하게 사용하실 수 있기 때문에 이 방법을 추천드립니다.

 

---

.