파일 선택시 파일이 쌓이지 않고 교체되는 상황

일단 내 문제점이 뭐였냐면,

const [files, setFiles] = useState ([]);

//I think I have to edit following statement.

const handleFile = (e) => {
   const newFiles = []
   for (let i=0; i < e.target.files.length; i++) {
       newFiles.push(e.target.files[i])
    }
        setFiles(newFiles)
};

나는 이 코드를 써서 input type='text'로 파일을 선택할 시, mulitple 속성을 줘서 여러개까지 업로드가 가능하게끔 했는데

파일을 한 개 고르고, 또 다시 한 개를 고르면 파일이 총 두개가 되야되는데, 파일이 후에 고른 파일 하나밖에 렌더링 되지 않았다.

두개씩 세개씩 네개씩은 잘 되는데, 한 개씩은 서로 교체해버리니 돌 지경이었다.

해결책은 어렵지 않았다

  const [files, setFiles] = useState([]);

  const handleChange = (e) => {
    setFiles((prev) => [...prev, ...Object.values(e.target.files)]);
  };

You can use a function inside the setState function to get the current state value and return whatever you want to replace the state. What you want here is the current value of the state + the value you added. So, you just need to return the merged arrays => [prev, current]

이게 답변 남겨준 사람이 덧붙인 설명인데. 무슨 말인지 이해는 가는데, 작동원리는 도저히 모르겠다.

Prev가 첫 번째 선택한 파일일 거고, ...prev로 copy해주고 다시 e.target.files를 가져온다.....

음. 역시 어렵구만