React-dropzone 란?

파일 업로드를 구현하기 위한 라이브러리 입니다.

HTML5 호환 드래그 앤 드롭 파일 영역을 만드는 Simple Respon hook 이다.

yarn add react-dropzone
명령어로 설치하면 된다

이렇게 코드를 쓰면 된다

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />