[이미지 업로드, 이미지 프리뷰] FileReader객체란? reader.onload 함수란? (feat. chatGPT 너 진짜 똑똑하다..)

이미지를 업로드하고 그 업로드 한 이미지를 프리뷰하는 기능을 구현하고 있다.

  const [previewImage, setPreviewImage] = useState<string>("");
  const [file, setFile] = useState<File | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);
  
  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];

    if (selectedFile) {
      if (selectedFile?.size > MAX_FILE_SIZE) {
        alert("파일 크기가 너무 큽니다.");
        return;
      }

      const reader = new FileReader();
      reader.onload = () => {
        setPreviewImage(reader.result as string);
      };

      reader.readAsDataURL(selectedFile);
      setFile(selectedFile);
    }
  };

코드의 일부인데 

내 코드지만 코드가 완벽 이해되지 않아 chatGPT에게 물어봤다..

이런식으로.. 물어봤는데.. 답변이 기가막힌다...
chatGPT를 잘 활용하면 더 똑똑한 개발자가 될 수 있을 것 같다 : )

 

이 게시물에는 chatGPT가 해준 답변을 내 방식으로 정리해보려고 한다!

 

FileReader 객체란?

웹 플랫폼에서 제공하는 JavaScript 객체 중 하나로, 파일을 비동기적으로 읽어들일 수 있는 기능을 제공한다.
FileReader 객체를 사용하면 웹 브라우저에서 선택한 파일의 내용을 읽고, 특정 형식으로 인코딩하여 사용할 수 있다.
이를 통해 클라이언트 측에서 파일을 읽어들인 후, 서버에 전송하는 등 다양한 용도로 활용하는 것이다.

FileReader 객체를 사용하여 파일을 읽을 때,
readAsDataURL() 메서드를 사용하여 파일을 읽고 Base64 인코딩된 문자열로 변환할 수 있다.
이를 통해 이미지 미리보기 등에 사용하는 것이다.

 

FileReader 객체는 크로스 브라우징을 지원하며, 모바일 기기에서도 사용할 수 있다.

하지만 파일 크기가 매우 큰 경우, 메모리 부족 등의 문제가 발생할 수 있으므로 주의가 필요하다.

reader.onload 함수가 하는 일

const reader = new FileReader();
reader.onload = () => {
   setPreviewImage(reader.result as string);
};

reader.readAsDataURL(selectedFile);
setFile(selectedFile);

reader.onload 함수는 FileReader가 비동기적으로 파일 데이터를 읽고, 파일을 다 읽어들였을 때 호출되는 콜백 함수이다.

FileReader.readAsDataURL() 메서드는 선택된 파일을 Base64로 인코딩된 문자열로 변환하고,
이를 reader.result 프로퍼티에 저장한다.

reader.onload 함수에서는 이 reader.result 값을 가져와서 setPreviewImage 함수를 통해 state 값을 업데이트하는 것이다.
이를 통해, 파일 선택란에 선택된 이미지 파일을 Base64로 인코딩된 문자열로 변환한 후, 화면에 이미지를 미리보기 할 수 있다.

즉, reader.onload 함수는 파일을 읽은 후에 setPreviewImage를 호출하여 미리보기 이미지를 업데이트하고,
이벤트 처리기 함수가 끝날 때 파일을 state 값에 설정한다.

즉!!!
reader.readAsDataURL(selectedFile)에서 selectedFile을 Base64로 인코딩된 문자열로 변환하고
reader.result 프로퍼티에 저장한 후 reader.onload 함수가 작동하여 파일을 읽은 후에
미리보기 이미지를 업데이트할 수 있도록 구현하는 것이다.
그리고 이후에, 파일을 state 값에 설정하는 setFile 함수를 호출하여 파일 데이터를 서버에 업로드하는 것이다.

setPreviewImage 함수를 통해 업데이트된 state값을 서버에 업로드하면 안되는 걸까?

안된다.
setPreviewImage 함수를 통해 업데이트된 state 값은 이미지를 미리보기하는 용도로만 사용되는 값이며,
실제 파일 데이터가 아니기 때문에 서버에 업로드하면 안된다.

setFile 함수를 통해 업로드할 파일 데이터를 state 값으로 설정하고, 이를 서버에 전송해야 한다.
따라서, 이후에 파일 데이터를 서버에 전송할 때는 selectedFile 변수나 setFile 함수를 사용해야 한다.