비동기로 처리하는 것이다.

shoutout to choi95

로컬 PC에서 이미지 가져오고 저장하기_타입스크립트 내에서 비동기 작업을 통한 FileReader 인스턴스 사용기

최종 코드

// 미리보기 이미지 프로세싱
  const processFile = (
    currentFile: File
  ): Promise<string | ArrayBuffer | null> => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(currentFile);
      reader.onload = () => {
        const result = reader.result;
        resolve(result);
      };
    });
  };

  const parseFile = async (currentFile: File) => {
    const parsedFile: string | ArrayBuffer | null = await processFile(
      currentFile
    );
    return parsedFile;
  };

  // 파일을 선택했을때 저장
  const imgUpload = (e: any, check: number) => {
    const file = e.target.files[0];
    const previewSrc = parseFile(file);

    previewSrc.then((res) => {
      if (check === 1) {
        setProfileImg(res);
      } else {
        setBackImg(res);
      }
    });
  };