배경
이미지를 업로드하는 과정중, 파일이 크면 이미지를 최적화해서 업로드하는시간의 공백이 생각보다 길기 때문에, 로딩 처리를 해주는 것이 맞다고 생각했다.
해결 과정
1.
파일 업로드 버튼 클릭시, useState로 isLoading을 true, 이미지 준비중 이미지 띄운다.
2.
이미지가 로딩중 useState에 실제 이미지 파일 값이 들어오면, 파일 이미지로 바꿔주기
3.
문제는, 이미지 파일을 고르지 않고 취소를 선택하면, 그냥 이미지 로딩중 상태가 계속 떠있게 된다.
4.
그럼 사진 파일이 있을 때, 로딩처리를해주고, 비동기적으로 사진이 최적화되고 url이 생성될 동안 로딩페이지를 보여주자. 이후 사진이 잘 들어왔다면 로딩을 종료해준다.
// 사진 업로드
const imgRef = useRef<HTMLInputElement>(null);
const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const fileArr = e.target.files as FileList;
// 사진 파일이 있으면 로딩상태로 변경
if (fileArr) {
setImgPeek({ image: '', isLoading: true });
} else return;
try {
// 사진 최적화
const compressedFiles = await makeCompressedImg(fileArr);
// 파일 url 생성
const result = await toFileURLs(compressedFiles as File[]);
if(result) {
// 사진 보기
setImgPeek({ isLoading: false, image: result[0] });
}
} catch (err) {
console.error('파일 업로드 오류:', err);
setImgPeek({ image: '', isLoading: false });
}
};
TypeScript
복사
