파일 업로드를 구현하기 위하여 이용한 라이브러리인 react-dropzone 를 소개하고자 한다.
HTML5 호환 드래그 앤 드롭 파일 영역을 만드는 Simple Respon hook 이다.
npm install --save react-dropzone
yarn add react-dropzone
나의 경우는 해당 프로젝트에서 yarn을 사용하고 있기 때문에 위 명령어를 활용했다.
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 />