드래그 및 크기 조정 기능
- react-draggable:
react-draggable은 드래그 기능만 제공합니다. 크기 조정 기능은 포함되어 있지 않습니다. - react-resizable:
react-resizable은 크기 조정 기능만 제공합니다. 드래그 기능은 포함되어 있지 않으며, 요소의 크기를 조정할 수 있는 핸들만 제공합니다. - react-grid-layout:
react-grid-layout은 드래그와 크기 조정 기능을 모두 제공합니다. 그리드 시스템을 기반으로 하여, 요소를 자유롭게 이동하고 크기를 조정할 수 있습니다. - react-rnd:
react-rnd는 드래그와 크기 조정 기능을 모두 제공합니다. 두 가지 기능을 통합하여, 요소를 자유롭게 이동하고 크기를 조정할 수 있습니다.
그리드 레이아웃 지원
- react-draggable:
react-draggable은 그리드 레이아웃을 지원하지 않습니다. 드래그 가능한 요소의 위치를 자유롭게 설정할 수 있지만, 그리드 시스템은 없습니다. - react-resizable:
react-resizable은 그리드 레이아웃을 지원하지 않습니다. 크기 조정 기능만 제공하며, 그리드 시스템은 없습니다. - react-grid-layout:
react-grid-layout은 그리드 레이아웃을 기본으로 합니다. 요소를 그리드 셀에 맞춰 배치하고, 크기를 조정할 수 있습니다. 그리드 시스템을 활용하여 정렬 및 배치가 가능합니다. - react-rnd:
react-rnd는 그리드 레이아웃을 지원하지 않습니다. 드래그와 크기 조정 기능을 제공하지만, 그리드 시스템은 없습니다.
사용자 정의 가능성
- react-draggable:
react-draggable은 드래그 가능한 요소의 스타일과 동작을 간단하게 사용자 정의할 수 있습니다. 그러나 그리드 시스템이나 크기 조정 기능은 제공하지 않으므로, 제한된 사용자 정의만 가능합니다. - react-resizable:
react-resizable은 크기 조정 핸들의 스타일과 동작을 사용자 정의할 수 있습니다. 그러나 드래그 기능은 제공하지 않으므로, 크기 조정에만 한정된 사용자 정의가 가능합니다. - react-grid-layout:
react-grid-layout은 그리드 레이아웃, 드래그 및 크기 조정 기능을 모두 사용자 정의할 수 있습니다. 그리드 셀의 크기, 위치, 드래그 및 크기 조정 핸들 등을 세밀하게 조정할 수 있습니다. - react-rnd:
react-rnd는 드래그와 크기 조정 기능 모두에 대해 사용자 정의가 가능합니다. 핸들의 스타일, 드래그 제한, 크기 조정 제한 등을 자유롭게 설정할 수 있습니다.
코드 예시
- react-draggable:
드래그 가능한 요소 예시
import React from 'react'; import Draggable from 'react-draggable'; function DraggableExample() { return ( <Draggable> <div style={{ width: 100, height: 100, backgroundColor: 'lightblue' }}> 드래그 해보세요! </div> </Draggable> ); } export default DraggableExample; - react-resizable:
크기 조정 가능한 요소 예시
import React from 'react'; import { Resizable } from 'react-resizable'; import 'react-resizable/css/styles.css'; function ResizableExample() { return ( <Resizable width={200} height={200} onResize={(e, { size }) => console.log(size)}> <div style={{ width: '100%', height: '100%', backgroundColor: 'lightblue' }}> 크기 조정 해보세요! </div> </Resizable> ); } export default ResizableExample; - react-grid-layout:
드래그 및 크기 조정 가능한 그리드 예시
import React from 'react'; import { WidthProvider, Responsive } from 'react-grid-layout'; const ResponsiveGridLayout = WidthProvider(Responsive); function GridLayoutExample() { const layout = [ { i: 'a', x: 0, y: 0, w: 1, h: 2 }, { i: 'b', x: 1, y: 0, w: 1, h: 2 }, { i: 'c', x: 0, y: 2, w: 2, h: 1 }, ]; return ( <ResponsiveGridLayout layout={layout} cols={{ lg: 2 }} rowHeight={30}> <div key="a" style={{ background: 'lightcoral' }}>A</div> <div key="b" style={{ background: 'lightgreen' }}>B</div> <div key="c" style={{ background: 'lightblue' }}>C</div> </ResponsiveGridLayout> ); } export default GridLayoutExample; - react-rnd:
드래그 및 크기 조정 가능한 요소 예시
import React from 'react'; import { Rnd } from 'react-rnd'; function RndExample() { return ( <Rnd default={{ x: 0, y: 0, width: 200, height: 200 }} style={{ border: '1px solid black', backgroundColor: 'lightblue' }} > 드래그 및 크기 조정 해보세요! </Rnd> ); } export default RndExample;