bokuweb/re-resizable

개요 React에서 크기 조절 가능한 컴포넌트를 구현하기 위한 라이브러리다. 드래그로 컴포넌트의 폭과 높이를 자유롭게 조절할 수 있다. 2,600+ stars를 보유하고 있다.

핵심 내용 8방향(상하좌우, 대각선) 리사이즈 핸들을 제공하며, 최소/최대 크기 제한, 그리드 스냅, 잠금 비율(aspect ratio) 등 세밀한 옵션을 지원한다. TypeScript로 작성되어 타입 안전성이 보장되며, 콜백을 통해 리사이즈 이벤트를 처리할 수 있다.

기존 대비 차별점 브라우저 기본 resize 속성과 달리 React 상태와 연동되고, 커스텀 핸들 UI 적용, 제어/비제어 컴포넌트 모두 지원한다. react-draggable과 함께 사용하면 이동+리사이즈가 가능한 패널을 구현할 수 있다.

활용 가능성 IDE 스타일 레이아웃, 대시보드 위젯, 분할 패널, 코드 에디터 등 사용자가 레이아웃을 직접 조절할 수 있는 인터페이스에 활용할 수 있다.

참고 자료 - 원본