드래그 드롭 업로드 구현 화면. 드롭중인 마우스가 드롭 영역에 들어올 때마다 드롭 영역의 배경색이 바뀌고 있다.

요즘 대부분 웹사이트에서 파일을 업로드할 때 마우스로 원하는 파일을 끌어 놓는 드래그&드롭 기능을 지원한다. 리액트에선 React DnD 같은 라이브러리를 사용할 수도 있지만 HTML5에서 제공하는 드래그 드롭 API를 이용해서 직접 구현할 수 있다. 생각보다 어렵지도 않다.

기본 구조

• 🔍️ DragDrop.tsx 구조 톺아보기

• 파일을 업로드하면 드롭 영역 하단에 업로드했던 파일명 리스트를 보여준다.
• 각 파일명 우측에 있는 × 버튼을 누르면 업로드한 파일이 삭제된다.
• (참고) 업로드한 파일이 이미지 형식이라면 FileReader API를 이용해 이미지 미리보기를 구현할 수도 있다.

상태

export interface IFileTypes {
  id: number;
  object: File; // File 객체
}

const [isDragging, setIsDragging] = useState<boolean>(false);
const [files, setFiles] = useState<IFileTypes[]>([]);
const fileId = useRef<number>(0); // 상태가 변해도 리렌더할 필요 없으므로 useRef로 관리

• isDragging : 드래그중인 마우스가 드롭 영역 위에 위치했는지 여부

  🔍 onDragOver onDrop 이벤트가 걸린 요소는 드롭 영역으로 지정된다

• files : 업로드한 파일이 담길 배열. 각 요소는 하나의 File 객체

• fileId : 업로드한 파일 번호 (1개 파일을 업로드할 때마다 1씩 증가)

onChange 핸들러