firebase 데이터불러오기

import {
  addDoc,
  collection,
  getDocs,
  onSnapshot,
  orderBy,
  query,
} from "firebase/firestore";
import React, { useEffect, useState } from "react";
import { dbService } from "./firebase";
const Home = () => {
  const [nweet, setNweet] = useState("");
  const [nweets, setNweets] = useState([]); // nweets를 가져와보도록하자
  const getNweets = async () => {
    const dbNweets = await getDocs(collection(dbService, "nweets")); // getDocs를 사용해서 nweets의 collection을 읽어옴, 허나 v9에 맞지않을듯?
    dbNweets.forEach((doc) => {
      const newObject = {
        ...doc.data(),
        id: doc.id,
      };
      setNweets((prev) => [newObject, ...prev]);
    });
    console.clear(nweets);
  };

  useEffect(() => {
    getNweets();
  }, []);
  const onSubmit = async (event) => {
    event.preventDefault();
    await addDoc(collection(dbService, "nweets"), {
      nweet: nweet,
      createdAd: Date.now(),
    });
    setNweet("");
    console.log(nweet);
  };

  const onChange = (e) => {
    const {
      target: { value },
    } = e;
    setNweet(value);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="What's on your mind?"
          maxLength={120}
          value={nweet}
          onChange={onChange}
        />
        <input type="submit" value="트윗" />
      </form>
      <div>
        {nweets.map((nweet) => (  //map을통해 데이터 뿌리기
          <div key={nweet.id}>
            <h4>{nweet.nweet}</h4>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Home;

이제 아래처럼 변경해야함

  useEffect(() => {
    const q = query(
      collection(dbService, "nweets"),
      orderBy("createdAt", "desc") // createdAd 처럼 오타 주의
    );
    onSnapshot(q, (snapshot) => {
      const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setNweets(nweetArray);
    });
  }, []);