Next.js | 이미지 업로드 및 미리보기

const inputImageRef = useRef<HTMLInputElement>(null);
const [previewImageUrl, setPreviewImageUrl] = useState<string>('');

const selectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0]; 
  // input file 의 change evnet target 에 선택된 파일이 files 배열에 담겨있다
  if (!file) {
    return;
  }
  const reader = new FileReader();
  reader.onload = (e) => { 
    // readAsDataURL() 의 파일 읽기 작업이 완료되면 onload 핸들러가 호출된다 
    const dataUrl = e.target?.result; 
     // base64 인코딩 된 스트링 데이터가 e.target.result 에 담긴다

    if (typeof dataUrl !== 'string') {
      return;
    }
    setPreviewImageUrl(dataUrl);
  };
  reader.readAsDataURL(file);
  // readAsDataURL은 FileReader 객체를 사용하여 컨텐츠를 특정 Blob 이나 File 에서 읽어 오는 역할
 // base64 인코딩 된 스트링 데이터가 e.target.result 에 담긴다
};

return (
    <div>
      <div>
        <button
          onClick={handeInputImageClick}
        >
          파일 업로드
        </button>
        <input
          id="file"
          ref={inputImageRef}
          type="file"
          accept="image/*"
          style={{ display: 'none' }}
          onChange={selectFile}
        />
        <Image
          src={
            selectedImageUrl
              ? selectedImageUrl
              : '기본 이미지 주소'
          }
          alt="이미지"
          width={610}
          height={610}
        />
      </div>
    </div>
  );