[TIL] 04.22 react-dropzone

이미지 업로더 라이브러리인 react-dropzone 에 대해서 공부를 하였다. 

 

const Previews = (props) => {

  //업로드하려는 파일의 정보를 담는다.  
  const [files, setFiles] = useState([]);
  
  // 업로드 하려는 파일의 URL을 생성하고 파일 name 등의 정보를 files 에 담아준다.
  const onDrop = (acceptedFiles) => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })));
  }
  
  const {
    getRootProps, 
    getInputProps
  } = useDropzone({
    accept: 'image/*',// 허용 하는 파일 형식
    onDrop,
    }
  });
  
  // 업로드하려고 선택한 파일의 이미지를 미리보기로 보여준다. 
  const thumbs = files.map(file => (
    <div key={file.name}>
      <div>
        <img
          src={file.preview}
        />
      </div>
    </div>
  ));

  useEffect(() => () => {
    // createObjectURL 로 생성한 URL을 revokeObjectURL 로 제거 해준다
    //메모리 누수를 방지하기 위해 생성된 URL을 DOM과 바인딩한 후에는 해제하는 것이 좋다고한다.
    files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);
  
  //현재 업로드한 이미지 파일을 취소하는 기능
  const handleCancle = () => {
    setfiles([])
  }
  
  return (
    <section className="container">
      {files.length < 0 ?   // 이미지 업로드가 되면 업로드 버튼은 안보이게 되고 미리보기 이미지를 보여준다.
        <div {...getRootProps({className: 'dropzone'})}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div> :
        <div>
          {thumbs}
          <button onClick={handleCancle}>
            cancle
          </button>
        </div>
      }
    </section>
  );
}

export default Preview