파일 Drag & Drop

요약

react-dnd는 Drag & Drop이 필요한 더 넓은 범위로 활용 가능한 라이브러리라서 react-dropzone만 사용해도 될 것 같다.

 

1. react-dropzone

 

샘플 코드

// ...
const [acceptedFiles, setAcceptedFiles] = useState<File[]>([]);

const onDropFiles = (acceptedFiles: File[]) => {
    setAcceptedFiles(acceptedFiles);
    console.log(acceptedFiles);
}

return (
  // ...
  <Dropzone onDrop={onDropFiles}>
      {({getRootProps, getInputProps}) => (
          <section className="bg-orange-400 py-6 rounded">
              <div {...getRootProps()}>
                  <input {...getInputProps()} />
                  {_.isEqual(acceptedFiles.length, 0) ?
                      <p className="cursor-pointer">파일을 첨부해주세요.</p> : acceptedFiles.map((file, idx) => (
                          <div key={`file` + idx}>{acceptedFiles[idx].name}</div>))}
              </div>
          </section>
      )}
  </Dropzone>
)

Github (Star 10.3K / Fork 779)

https://github.com/react-dropzone/react-dropzone

특징

• 원하는대로 UI 유연하게 커스텀 가능
• N개 첨부 가능
• Files 관련 상태값 활용하여 쉽게 사용 가능

---

2. react-dnd

https://react-dnd.github.io/react-dnd/about

https://github.com/react-dnd/react-dnd/

특징

• 원하는대로 UI 유연하게 커스텀 가능
• 파일 외에 drag & drop 관련 UI에 모두 사용하는 라이브러리
  • 파일 외의 용도로 사용하고자 한다면 활용할법 하나, 현재는 파일 관련 Drag & Drop UI만 필요함