React Synthetic Event와 Input[type="file"]에 대해 질문이 있습니다.

React
1

안녕하세요! 리액트 이벤트와 파일 업로드 관련해 질문이 있습니다.

<input type="file" multiple ...> 를 통해 다수의 이미지 업로드 기능을 추가하면서 onChange 이벤트 callback함수를 통해 event.target.files에 접근했는데, 다수의 파일 업로드로 접근할 때마다 가장 최근에 업로드한 파일 정보만을 fileList에 담고 있는걸 발견했습니다.
파일을 업로드해도 계속해서 아래와 같이 console로 확인을 할 수 있었습니다.

FileList {0: File, constructor: Object}
  > 0: File
  > <constructor>: "FileList"

처음에는 Event Pooling과 관련하여 Synthetic Event의 property 값을 모두 null로 만들어주기 때문에 이후 내가 업로드하는 파일만 접근할 수 있는가 싶었지만, event.target.value나 다른 dom attribute는 기존 값에 계속 접근할 수 있기 때문에 Event Pooling과는 상관없을 것 같다고 생각하며 머리속에 혼란이 왔습니다.

이와 관련하여 자료를 찾기가 힘들어 이렇게 글을 남깁니다. 혹시 내부에서 어떻게 동작하기에 이렇게 fileList가 계속해서 최신 파일로만 reset 되는지, fileList의 attribute를 직접 건드는 건지 등에 대해 아시는 분이 있으실까요??

미리 감사드립니다.

2

받아올 이벤트 처리함수를 테스트용으로 아래것을 추가 하여 테스트 해보세요
const handleFileInput = () => {
const jsonFileList = new Array();
const curFiles= e.target.files

console.log(curFiles); //전체 확인

var filesLength = curFiles.length;
var i=0;
while (i < filesLength ) {
var _file = curFiles[i];
console.log(_file); //읽을때마다 건별 확인

            jsonFileList.push({
                //div: 'img',
                //name: '개발자',
                //title: 'Title',
                //type: 'jpg',
                img: _file,
                //imgbase64: '',
                //size: resizefile.size,
                //width: 500,
                //height: 300
            })

   i++;

}

console.log(jsonFileList); //별도 변수에 추가된 전체 리스트
}

혹시 미리보기도 하실거면 while문에서 파일의 경로만 추가 하신후에(jsonFileList를 useState롤 변경필요) 미리보기할 부분에 컴포넌트도 포함하여 렌더링…소스필요하시면 쪽지 주세요…지금 소스찍기에는…