React Firebase정리

firebase 가입 후 셋팅

npm install firebase

firebase.js

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "AIzaSyBxS3dnzMob7N8AVrINa3doa9VSLt2PDd4",
  authDomain: "immutable-finalproj.firebaseapp.com",
  projectId: "immutable-finalproj",
  storageBucket: "immutable-finalproj.appspot.com",
  messagingSenderId: "597264130146",
  appId: "1:597264130146:web:382e8ef501a76b3192713b",
  measurementId: "G-NJSFHHK126"
};

const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);

APP.js

 //이미지
  const [selectedImages, setSelectedImages] = useState([]);
  //서버에 보내지는 파일
  const [selectedFiles, setSelectedFiles] = useState([]);
  //받을 URL
  const [imageURL,setImageURL] = useState([]);
  const onSelectFile = (e) => {
    e.preventDefault();
    e.persist();
    //선택한 파일
    const imageLists = Array.from(e.target.files);
    let imageURLlist = [...selectedFiles];
    if (e.target.files.length > 2) alert(`한번에 업로드 가능한 사진은 최대 2장 까지 입니다.`);
    
    for(let i = 0; i < 2; i++){
      const inputImage = imageLists[i];
      imageURLlist.push(inputImage);
      console.log(imageLists[i]);
    }
    setSelectedFiles(imageURLlist);
    //이미지 리스트가 없다면 
    if(!imageURLlist) return null;
    //이미지가 있다면 리스트의 크기만큼 map을 돌아 하나씩 전송하여 url을 담는다.
    imageURLlist.map((file) => {
    const storageRef = ref(storage, `uploadimg/${file.name}`);
    const uploadTask = uploadBytes(storageRef, file);
    uploadTask.then((snapshot) =>{
      getDownloadURL(snapshot.ref).then((downloadURL) =>{
        console.log("File avalable at",downloadURL);
        setImageURL(prevURL=>[...prevURL,downloadURL]);
      })
    })
  })

    const selectedFileArray= imageURLlist;
     //브라우저 상에 보여질 파일 이름
    const imageArray = selectedFileArray.map((file) => {
    return file.name; });
       // 첨부파일 삭제시
    setSelectedImages((previousImages) => previousImages.concat(imageArray));
    e.target.file = '';
   
  };