[React] 리액트 이미지 업로드 (feat. firebase storage)

React 이미지 업로드 기능 구현

react에서 이미지를 업로드 및 이미지 미리보기 기능 구현에 대해 알아보자.
React와 Firebase를 연결해 storage를 사용할 수 있도록 구현하고 Firebase의 자세한 연동방법은 이번글에서는 생략하고 알아보도록 하자

useUploadImage 커스텀훅 사용하기

• ref함수를 사용하여 파일을 업로드하려는 Firebase storage에 대한 참조를 만든다.
• Firebase storage의 uploadBytes 함수를 사용하여 이미지를 업로드한다.
• getDownloadURL 함수는 업로드된 파일의 URL을 다운로드한다.

useUploadImage.ts

import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import { v4 as uuidv4 } from "uuid";

import { storage } from "@/libs/firebase";

export default function useUploadImage() {
  const storageRef = ref(storage, `files/${uuidv4()}`);
  // firebase storage에 files이란 폴더가 만들어지고 그 안에 생성된 uuid 이름으로 이미지파일이 저장되게끔 한다.

  const uploadImage = async (file: File) => {
    const snapshot = await uploadBytes(storageRef, file);
    const downloadUrl = await getDownloadURL(snapshot.ref);
    return downloadUrl;
  };

  return uploadImage;
}

UI만들고 적용하기

Page.tsx

import { useState } from "react";

import useUploadImage from "@/hooks/useUploadImage";

export default function Page() {
  const [imageUrl, setImageUrl] = useState<string>("");
  const [file, setFile] = useState<File | null>(null);

  const uploadImage = useUploadImage();

  const onSubmit = async (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (file) {
      const downloadUrl = await uploadImage(file);
      console.log(downloadUrl);
      setImageUrl(downloadUrl);
    }
  };

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return null;
    setFile(files[0]);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input type="file" onChange={onChange} accept="image/*" />
        <button type="submit">이미지 업로드</button>
      </form>
      {imageUrl ? (
        <img src={imageUrl} alt="previewImage" />
      ) : (
        "이미지를 업로드 해주세요"
      )}
    </div>
  );
}

완성화면

• 파일이 선택되고 업로드되면 업로드된 이미지를 미리볼 수 있고, Firebase Storage에 이미지가 저장되었음을 확인할 수 있다