반응형
1. 개요
react-dropzone 라이브러리는 드래그 앤 드랍(drage and drop)을 쉽게 구현할 수 있게 도와주는 라이브러리이다.
사용자가 이미지, 파일 등을 업로드 할 때 드래그 앤 드랍이 있으면 사용성이 증가하는 경우가 있다.
이번에는 react-dropzone라이브러리 사용법을 간단하게 정리해보았다.
2. GitHub
모든 사용방법은 공식 GitHub에서 확인할 수 있다.
https://github.com/react-dropzone/react-dropzone
GitHub - react-dropzone/react-dropzone: Simple HTML5 drag-drop zone with React.js.
Simple HTML5 drag-drop zone with React.js. Contribute to react-dropzone/react-dropzone development by creating an account on GitHub.
github.com
3. 사용법
아래 명령어로 설치할 수 있다.
npm install --save react-dropzone
or
yarn add react-dropzone
그리고 아래의 예시처럼 사용할 수 있다.
import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
function MyDropzone() {
const onDrop = useCallback(acceptedFiles => {
// 업로드된 파일 처리
}, [])
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> : // 파일이 박스 안에 있을 때
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
)
}
업로드 된 파일을 처리하는 함수는 반드시 onDrop이어야 한다.
여러개의 파일을 업로드하게 하고싶다면 multiple: true옵션을 추가하면 된다.
isDragActive로 아래처럼 사용자가 파일을 드롭박스 위에 올렸을 때 효과를 줄 수도 있다.

반응형
'프론트엔드' 카테고리의 다른 글
| [React Native] numeric타입 키보드에서 onSubmitEditing함수가 동작하지 않음 (1) | 2025.01.15 |
|---|---|
| [Frontend] DNS를 알아보자 (1) | 2024.11.27 |
| [TIP] 더미 이미지 URL이 필요할 때 (0) | 2024.11.25 |
| [Vercel] Vercel CLI로 프로젝트 배포하기 (0) | 2024.11.24 |
| [React Native] React Native는 더이상 bridge방식을 이용하지 않는다. (2) | 2024.11.23 |