2022-01-05

react에서 input-file 을 이용해 파일 객체를 가져와서 사진 미리보기 작업을 하고 있었다.
사진을 보려면 img 태그의 src 속성에 해당 이미지의 url 값을 넣어야 한다.
따라서 input-file 로 가져온 파일 객체에서 URL을 뽑아야 하는데,
이때 필요한 것이 FileReader 객체이다
FileReader 에서 readAsDataURL 을 이용하면 URL 값을 가져올 수 있다.
하지만 이 작업은 비동기적으로 처리가 된다.

따라서 한개의 파일을 읽을 때는 문제가 없지만
멀티파일을 동시에 읽어야 하는 상황에서는 문제가 발생했다.

(특히 forEach는 async를 기달려주지 않았다 )

이를 해결하기 위해 Promise를 이용했다
반복문을 돌릴 때마다 해당 한개의 파일을 읽는 Promise를 생성하였고
생성된 Promise를 배열에 모아서 Promise.all() 을 이용해
한번에 처리하였다

Promise 의 필요성과 비동기 처리에 대해 공부할 수 있었다