react-dropzone

1. 설치

npm install --save react-dropzone

 

2. 본론

 useCallback 함수의 이해가 필요 

• 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재사용할 수 있게 해준다. 
• 아래의 예시에서 x 또는 y 값이 바뀌면 새로운 함수가 생성되어 result 변수에 할당된다. 

const result = useCallback(() => x + y, [x, y]);

 

 javascript 의 dragover 이벤트를 React에서 사용법

import React, { useCallback } from 'react';

const DragAndDrop = () => {

    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        onDrop,✅
        accept: {
          'image/jpeg': ['.jpeg'],
          'image/png': ['.png'],
          'video/mp4': ['.mp4', '.MP4'],
        }
      });
      
    // ✅파일이 드롭됐을 때의 로직을 처리: acceptedFiles를 받는다.   
    const onDrop = useCallback( (acceptedFiles:any) => {
    
     console.log(acceptedFiles); //object 타입의 FileList 
     setDragFile(acceptedFiles) 

  	}, []);   
 	return (
    	<div {...getRootProps()} >
        	<input
            	{...getInputProps()}
                type="file"
                accept="image/*"
             />
    	</div>
    )
  
}

 

getRootProps 란?

• getRootProps 함수는 파일 업로드 영역을 감싸는 최상위 DOM 엘리먼트에 필요한 프로퍼티를 반환