[Library] React-Dropzone 라이브러리 사용방법

 

 

오늘은 파일 업로드를 간편하게 구현할 수 있는 dropzone.js의 리액트 버전, react-dropzone을 활용하는 방법에 대해 다뤄보겠습니다.

 

dropzone.js는 공식 문서가 잘 정리되어 있어 기본적인 사용법을 익히기 어렵지 않지만, react-dropzone의 공식 문서는 다소 부족한 감이 있습니다. 그래서 이번 글에서는 리액트와 결합하여 react-dropzone을 효율적으로 활용하는 방법을 중심으로 설명드리겠습니다. 기본적인 함수 사용법 등은 dropzone.js의 공식 문서를 참고하시면 도움이 될 것입니다.

 

Dropzone.js 공식 문서

 

https://docs.dropzone.dev/

Introduction | Dropzone

 

 

React-Dropzone 공식 문서

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

react-dropzone

 

 

---

 

 

 

1. react-dropzone이란?

 

react-dropzone은 드래그 앤 드롭으로 파일을 업로드할 수 있는 기능을 제공하는 리액트 라이브러리입니다. 드래그 앤 드롭 외에도 클릭하여 파일을 선택하는 방식도 지원하며, 사용자 경험(UX)을 크게 개선할 수 있습니다.

 

 

2. 설치 방법

 

먼저 프로젝트에 react-dropzone을 설치합니다. 아래 명령어를 실행하세요.

 

npm install react-dropzone

 

 

3. 기본 사용법

 

아래는 react-dropzone의 기본적인 사용 예제입니다.

 

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

const MyDropzone = () => {
  const onDrop = (acceptedFiles) => {
    console.log(acceptedFiles);
  };

 const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone(
 	{ 
    	onDrop, 
    	multiple: false, 
        accept: { "image/png": ['.png'] } 
     }
  )
  
  const RootProps = {
    	...getRootProps(),
};
    
  return (
	<div className="dropzone-area" {...RootProps}>
            {isDragReject ? (
                <p className="drag-reject-text">파일 형식이 맞지 않습니다. PNG 형식의 이미지 파일을 등록해주세요.</p>
            ) : isDragActive ? (
                <div className="drag-active-content">
                    <CloudUploadIcon />
                    <p>파일을 놓아 업로드</p>
                </div>
            ) : (
                <div className="dropzone-content">
                    <CloudUploadIcon />
                    <p>PNG 형식의 이미지를 마우스로 끌어 놓으세요.</p>
                    <Button variant="contained" color="primary">
                        파일 직접 추가
                    </Button>
                </div>
            )}
       </div>
  );
};

export default MyDropzone;

 

1. getRootProps 

 

• getRootProps는 드롭 영역의 div 요소에 필요한 속성을 추가하는 데 사용됩니다.

• 이 속성들을 <div> 요소에 적용하면 dropzone 기능이 해당 영역에 활성화됩니다.

 

 

2. getInputProps

 

• getInputProps는 <input> 요소에 필요한 속성을 추가합니다.

• 이 속성을 통해 드롭 영역에서 파일이 정상적으로 선택되고 처리될 수 있습니다.

 

 

3. isDragActive

 

• isDragActive는 사용자가 파일을 드롭 영역 위로 드래그하고 있을 때 true가 됩니다.

• 이를 활용해 드래그 중일 때 스타일을 변경하거나 추가 안내 메시지를 표시할 수 있습니다.

 

 

4. isDragReject

 

• isDragReject는 허용되지 않은 파일 형식이 드롭 영역 위로 드래그될 때 true가 됩니다.

• 예를 들어 accept 속성을 사용해 특정 파일 형식만 허용할 경우, 허용되지 않은 파일을 드래그하면 이 값이 true로 바뀝니다.

• 이 값을 통해 파일 형식 제한 안내 메시지를 추가로 표시할 수 있습니다.

 

 

5. onDrop

 

• onDrop은 파일이 드롭되거나 선택되었을 때 실행되는 콜백 함수입니다.

• 드롭된 파일들은 이 함수의 acceptedFiles 매개변수로 전달되며, 이 파일들을 서버로 전송하거나 리스트에 추가할 수 있습니다.

 

 

6. multiple: true

 

• multiple: true는 여러 개의 파일을 동시에 업로드할 수 있도록 허용하는 설정입니다.

• 이를 false로 설정하면 한 번에 하나의 파일만 업로드됩니다.

 

 

7. accept

 

• accept는 업로드할 수 있는 파일의 형식을 지정합니다.

• 주석 처리된 부분을 사용하면 비디오 파일만 업로드 가능하며, "video/*"는 모든 비디오 파일 형식을 허용하는 의미입니다.

 

 

 

 

4. 상태 관리 및 조건부 렌더링 노하우

 

 

 

 

1. 기본 화면, 기존 썸네일과 dropzone 초기 상태 화면으로, 파일 형식과 이미지를 위에 올려달라는 안내 문구를 보여준다.

2. dropzone 영역에 파일을 가지고 가면 이미지 영역은 background-color값을 줘서 뿌얘지게 만들고, dropzone Input 영역에는 파일을 놓아 업로드 하라는 안내 문구로 변경해준다.

3. 변경된 썸네일로 이미지 영역의 src를 교체해주고, dropzone은 사라지게 한다. 그리고 밑에 교체하기, 이전 버튼을 띄워줘서 사용자가 다음 작업을 할 수 있도록 한다.

 

---

 

 

이처럼 리액트의 조건부 렌더링 기능과 결합하여 react-dropzone 라이브러리를 활용하면 보다 효율적으로 파일 업로드 기능을 구현할 수 있습니다.

 

또한, react-dropzone은 다양한 추가 기능을 제공하므로 프로젝트 요구사항에 맞게 활용해 보시길 추천드립니다. 예를 들어, 여러 파일을 동시에 업로드할 수 있는 멀티 파일 업로드 기능이나 파일 업로드 상태를 시각적으로 나타낼 수 있는 진행 상태 표시(progress) 기능은 사용자 경험(UX)을 크게 향상시킬 수 있는 유용한 옵션입니다.

 

react-dropzone은 간단한 설정만으로도 강력한 기능을 제공하므로, 이를 활용해 프로젝트의 파일 업로드 시스템을 한 단계 업그레이드해 보세요.

 

 

감사합니다.