파이어 베이스 데이터 추가하기 실습 코드

App.js

import React, { useEffect, useReducer, useRef, useState } from "react";
import { db } from "./1212/firebase";
import {
  collection,
  doc,
  getDoc,
  getDocs,
  query,
  setDoc,
  where,
} from "firebase/firestore";

function fruitsReducer() {}

const App = () => {
  const fruitCollection = collection(db, "fruits");

  const [name, setName] = useState();
  const [info, setInfo] = useState({});
  const [state, dispatch] = useReducer(fruitsReducer, {
    count: 0,
    fruit: [],
  });

  // 전체 데이터 가져오기 - getDocs() - 실행 결과 Fields 확인
  useEffect(() => {
    async function getFruits() {
      const data = await getDocs(fruitCollection);
      console.log(data);
    }
    getFruits();
  }, []);

  async function setFruit() {
    await setDoc(doc(fruitCollection, name), {
      ...info,
    });

    async function getFruits() {
      const data1 = await getDocs(fruitCollection);
      console.log(data1);
    }
    getFruits();
  }

  function changeHandler(e) {
    setInfo({ ...info, [e.target.name]: e.target.value });
  }

  function nameHandler(e) {
    setName(e.target.value);
  }

  return (
    <div>
      이름
      <input type="text" name="name" onChange={nameHandler} />
      <br />
      계절
      <input type="text" name="season" onChange={changeHandler} />
      <br />
      색상
      <input type="text" name="color" onChange={changeHandler} />
      <br />
      맛
      <input type="text" name="taste" onChange={changeHandler} />
      <br />
      가격
      <input type="number" name="price" onChange={changeHandler} />
      <br />
      <button onClick={setFruit}>과일추가</button>
    </div>
  );
};

export default App;

제대로 한건진 모르겠다. 작동은 잘 된다.