react-dropzone 정리

1️⃣ 설치

$ pnpm add react-dropzone

2️⃣ import 및 기본 사용

import { useDropzone } from "react-dropzone";

const { getRootProps, isDragActive } = useDropzone({
  //이미지가 들어가면 실행되는 함수
  onDrop: onDropThumbnail,
  //받는 이미지 확장자 리밋 설정
  accept: {
    "image/*": [".jpeg", ".jpg", ".png"],
  },
});

//..기타 코드

<div {...getRootProps()}>
  {isDragActive ? (
    <p>여기에 놓아주세요.</p>
  ) : (
    <p>이미지를 여기에 드롭하시거나, 클릭주세요.</p>
  )}
</div>

react-dropzone에서 useDropzone을 import하고 getRootProps와 isDragActive를 가져온다.

1. getRootProps : 태그 안에 넣고, 태그 클릭 시 Finder를 연다.
2. isDrageActive(boolean) : 드래그 되고 있는 이미지 파일이 getRootProps이 쓰여진 태그 범위 안으로 들어오면 true로 값이 변경된다.
3. accept : 위 코드처럼 쓰면 dropzone이 받는 이미지의 확장자를 제한할 수 있다.

3️⃣ 함수 및 컴포넌트

const [thumbnailPreview, setThumbnailPreview] =
      useState<AboutThumbnailPreview>();
//사진이 추가됐을 때 그 사진의 정보 상태담기
const onDropThumbnail = useCallback((acceptedFiles: File[]) => {
  const file = acceptedFiles[0];
  //file 첫번째 파일을 저장
  const fileURL = URL.createObjectURL(file);
  //createObjectURL는 임시로 URL을 저장할수 있는 메서드
  setThumbnailPreview({ url: fileURL, name: file.name, size: file.size });
}, []);
//저장된 상태 삭제하기 ( 이미지 삭제 )
const handleDeleteThumbnail = (e: MouseEvent<HTMLButtonElement>) => {
  e.stopPropagation(); // 이벤트 버블링 막기 위해 사용
  setThumbnailPreview(undefined);
};

1. onDropThunbnail : 먼저 상태를 담을 공간(thumbnailPreview)을 만들고, 이미지가 드랍되거나 선택됐을 때 실행될 함수를 만든다. 위에서 useDropzone의 onDrop에 이 함수를 넣고, 실행됐을 때 매개변수를 받아서 setThumbnailPreview로 상태를 저장한다.
2. handleDeleteThumbnail : 이건 그냥 상태를 없애고 다시 초기값인 undefined로 만드는 함수다.

4️⃣ 이미지 미리보기

<Image //nextjs만의 img 태그
  src={thumbnailPreview?.url}
  alt="uploadedImg"
  css={[profileImgStyle]}
  width={20}
  height={20}
/>

아까 상태를 담은 것중 url을 src에 담아서 렌더링 하면 된다!

끝!