react-dropzone - 이미지와 동영상 파일 업로더 라이브러리

 

개념

웹 개발을 하다 보면 유저의 대표 이미지를 업로드 하거나 영상을 업로드 하는 등 파일을 업로드해야 하는 일이 종종 발생한다.

하지만 express에서는 파일에 대한 처리를 지원하지 않기 때문에 파일 드래그 앤 드랍 존을 만들기 위해 해당 라이브러리를 사용한다.

 

Usage

설치

react-dropzone은 다음 명령어를 통해 설치할 수 있다.

npm install react-dropzone --save
// or
yarn add react-dropzone

 

사용

우선 사용법을 알아보기 위해 공식 문서의 예제를 가져왔다.

import React from 'react'
import Dropzone from 'react-dropzone'

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

 

위 코드를 보면 업로드한 파일의 정보가 acceptedFiles에 담기고 파일에 관련된 처리를 한다.

여기서는 간단하게 콘솔 로그를 찍는 일만 했지만 업로드한 파일을 서버에 보내는 작업을 해당 영역에 하면 될 것이다.

 

 

props

react-dropzone은 두 가지 props를 가지고 있는데 바로 getRootProps와 getInputProps이다.

이 두 props는 드래그 앤 드랍 존을 만드는데 필요한 속성을 가진 객체를 반환하는 함수이다.

 

getRootProps console log

getRootProps는 드래그 앤 드랍 존을 생성할 태그 안에 들어가고 드래그 앤 드랍 존에 대한 이벤트 처리 선언이 들어있다.

getRootProps에 다른 속성을 추가하고 싶다면 따로 처리하는 것이 아니라 꼭 getRootProps() 를 통해 전달해야 한다.

 

getInputProps console log

getInputProps는 드래그 앤 드랍 존을 생성할 태그 아래의 input 태그 안에 들어가고 input에 대한 속성이 들어있다.

 

 

file

만들어진 드래그 앤 드랍 존을 통해 파일을 업로드 했을 경우 다음과 같은 로그를 확인할 수 있다.

acceptedFiles에는 파일 이름, 경로, 크기, 타입 등 파일에 대한 정보가 담긴다.

 

 

 

 

react-dropzone에 대한 자세한 설명은 다음 페이지에서 확인할 수 있다.

https://react-dropzone.js.org/

react-dropzone