Obejct.assign을 구조 분해 할당으로 바꿨을 때 생겼던 문제점

[Kwakcena]

문제 상황

#37 진행 중 react-dropzone 라이브러리에 사용되는 handleOnDrop 함수는 drag 'n' drop 으로 올린 파일을 useState 를 사용하여 관리한다.

올린 파일의 사진을 '미리보기' 식으로 보여주기 위해 라이브러리에 있는 previews코드를 사용하였다.

이 코드에서는 입력 받은 acceptedFiles 의 파일 객체에 Object.assign 을 이용하여 preview 프로퍼티를 추가하고 있다.
파일을 하나 하나 추가하더라도 기존에 추가된 파일이 지워지지 않도록 약간 수정하여 다음과 같은 코드를 사용하였다.

function handleOnDrop(acceptedFiles) {
  setFiles([
    ...files,
    ...acceptedFiles.map((file) => Object.assign(file, {
      preview: URL.createObjectURL(file),
    })),
  ]);
}

그리고 console.log() 를 이용해서 추가된 파일에 대해 출력했을 때 File 객체가 들어있는 배열이 잘 나오는 것을 확인할 수 있었다.

Object.assign을 구조 분해 할당으로 바꾸다

Obejct.assign을 사용하지 않고 구조 분해 할당을 사용하는 코드로 바꿨다. 어차피 File 객체에 preview 프로퍼티를 추가하는 것이니 es6문법을 사용하기 위해서다.

function handleOnDrop(acceptedFiles) {
  setFiles([
    ...files,
    ...acceptedFiles.map((file) => ({
      ...file,
      preview: URL.createObjectURL(file),
    })),
  ]);
}

하지만 이렇게 바꾸니, File 객체가 일반 객체로 바뀌어 버렸다.

왜 기존의 File 객체에서 일반 객체로 바뀐걸까 ?