인프런 커뮤니티 질문&답변

MDN의 가이드에 따라 DragNDrop 코드를 작성하는데
파일을 가져오기 위한 코드인 event.dataTransfer.items 에서 아래와 같은 오류가 발생햇습니다.
'DataTransferItemList' 형식은 배열 형식이 아닙니다.ts(2461)

MDN DataTransfer: items 속성 가이드에서는 목록을 반환하고 항목이없어도 빈목록을 반환한다고 되어있고
MDN DataTransferItemList 타입 가이드에서 객체라고 명시되어 있던데 개별항목에는 [ ]표기법으로 접근할수 있다는걸로 보아

event.dataTransfer.items의 타입은 리스트가 아닌 오브젝트에 숫자를 KEY로 값을 넣어놓은 형태인가요?? 아님 또다른 타입인건가요?

코드

  function dropHandler(ev: React.DragEvent<HTMLDivElement>): void {
    console.log('File(s) dropped');

    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault();

    if (ev.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      [...ev.dataTransfer.items].forEach((item, i) => {
        // If dropped items aren't files, reject them
        if (item.kind === 'file') {
          const file = item.getAsFile();
          if (file) {
            console.log(`… file[${i}].name = ${file.name}`);
          }
        }
      });
    } else {
      // Use DataTransfer interface to access the file(s)
      const files = ev.dataTransfer.files;
      [...files].forEach((file, i) => {
        console.log(`… file[${i}].name = ${file.name}`);
      });
    }
  }

MDN DragNDrop가이드
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
MDN DataTransfer: items 속성 가이드
https://developer.mozilla.org/ko/docs/Web/API/DataTransfer/items
MDN DataTransferItemList 타입 가이드
https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList