[React][라이브러리] re-resizable를 사용해서 Resizing이 가능한 컴포넌트 구현 방법

# re-resizable 라이브러리를 활용해서 사용자가 크기를 변경할 수 있는 Component를 구현하는 방법

- 이전 포스팅에서 react-rnd를 소개한 적이 있습니다. 컴포넌트를 드래그앤드롭 및 크기 변경까지 가능해서 유용하게 사용할 수 있는 라이브러리였습니다. 오늘 포스팅에서 같은 개발자가 개발한 re-resizable이라는 조금 더 간단한 라이브러리를 소개해 드리려고 합니다. re-resizable은 이름에서 알 수 있듯이 이동관련 기능이 빠진, resizing에 초점이 맞춰진 라이브러리입니다. 컴포넌트의 크기를 마우스로 변경할 수 있는 기능을  추가하려는 경우에 유용하게 사용할 수 있을 것으로 보입니다.

# Github Page

GitHub - bokuweb/re-resizable: 📏 A resizable component for React.

 

# 사용법

- 라이브러릴 설치합니다

$ npm install --save re-resizable

- 사용법은 간단합니다. 원하는 size를 입력하거나, size 변경이 완료되는 이벤트에 대한 처리를 추가해서 사용하시면 됩니다.

import { Resizable } from 're-resizable';

<Resizable
  size={{ width: this.state.width, height: this.state.height }}
  onResizeStop={(e, direction, ref, d) => {
    this.setState({
      width: this.state.width + d.width,
      height: this.state.height + d.height,
    });
  }}
>
  Sample with size
</Resizable>

- 기본적인 size와 사이즈 변경 이벤트 이외에도 추가적인 Prop들이 존재하므로, 위의 예시보다 더 심도 있게 사용하실 분들은 아래의 링크를 확인해보시는 것을 추천드립니다.