[React] 드래그 앤 드랍 라이브러리(react-dropzone)

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.

 

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로 아래처럼 사용자가 파일을 드롭박스 위에 올렸을 때 효과를 줄 수도 있다.