react-draggable

React-Draggable은 요소를 드래그 가능하게 만드는 React 컴포넌트 라이브러리입니다. react-grid-layout 조직의 일부이며 npm에 react-draggable로 게시됩니다. 라이브러리는 두 개의 컴포넌트를 제공합니다. `<Draggable>`은 기존 요소를 감싸고 드래그 이벤트 핸들러와 스타일을 추가하며, CSS 변환(Transforms)을 통해 항목을 이동시키므로 현재 위치 지정 방식과 관계없이 드래그할 수 있습니다. DOM에 래퍼 요소를 만들지 않습니다. `<DraggableCore>`는 완전한 제어가 필요한 사용자를 위한 하위 레벨 옵션입니다. 상태나 스타일을 관리하지 않고 드래그 콜백만 제공하며 변환을 설정하지 않아 위치 지정은 개발자에게 맡깁니다. README는 DraggableCore의 사용 예시로 React-Resizable과 React-Grid-Layout을 가리킵니다. `<Draggable>`의 주요 props로는 axis(both, x, y, none), bounds(parent, CSS 선택자 또는 left/top/right/bottom 객체), cancel 및 handle CSS 선택자, grid 스냅, 제어된 사용을 위한 position, positionOffset, 변환된 부모를 위한 scale, disabled, 그리고 onStart, onDrag, onStop, onMouseDown 콜백이 있습니다. 핸들러에 전달되는 DraggableData에는 node, x, y, deltaX, deltaY, lastX, lastY가 포함됩니다. onStart에서 false를 반환하면 드래그가 취소됩니다. `<Draggable>`에 className, style 또는 transform을 설정하는 것은 오류이며, 이들은 자식 요소에 속합니다. README는 호환성을 문서화합니다. 4.x는 React 16.3+를 지원하고, 3.x는 React 15–16을 지원하며, 2.x는 React 0.14–15를 지원합니다. TypeScript 타입이 포함되어 있습니다. 설치는 npm 또는 yarn을 통해 이루어지며, ES 모듈 및 CommonJS 가져오기 예시가 있습니다. 주목할 만한 섹션은 nodeRef를 다룹니다. nodeRef prop을 전달하면 React Strict Mode에서 ReactDOM.findDOMNode() 더 이상 사용되지 않음 경고를 피할 수 있으며, README는 사용자 정의 컴포넌트에 ref와 props를 모두 전달하는 방법을 보여줍니다. 또 다른 섹션은 제어된 사용과 비제어 사용을 설명하며, Draggable의 상태 관리를 사용하면서 프로그래밍 방식으로 재배치하기 위해 position prop을 전달하는 방법을 보여줍니다. Content Security Policy 섹션은 react-draggable이 첫 드래그 시 문서 head에 작은 style 요소를 주입한다고 설명합니다(enableUserSelectHack 동작, 기본적으로 켜짐). 이는 드래그 중 텍스트 선택을 방지하기 위한 것입니다. style-src에 'unsafe-inline'이 없는 엄격한 CSP에서는 이 요소가 차단됩니다. 세 가지 해결 방법이 문서화되어 있습니다. nonce prop을 전달하거나, webpack의 __webpack_nonce__ 전역 폴백에 의존하거나, enableUserSelectHack={false}로 설정하고 두 가지 선택 규칙을 자신의 스타일시트에 추가하는 것입니다. nonce는 요소가 처음 생성될 때만 읽히며, 동일한 요소는 페이지의 모든 Draggable/DraggableCore가 공유합니다. 저장소에는 데모 사이트, 변경 로그, CI 워크플로, 그리고 yarn dev, yarn test 및 make 대상을 사용한 릴리스 체크리스트를 다루는 기여 지침이 포함되어 있습니다. 프로젝트는 MIT 라이선스입니다.