React Nwetter - home.js

import React, { useState, useEffect } from "react";
import { dbService } from "myBase";
import Nweet from "components/Nweet";
import NweetFactory from "components/NweetFactory";

const Home = ({ userObj }) => {
// const getNweets = async () => {
// const dbnweets = await dbService.collection("nweets").get();
// dbnweets.forEach((document) => {
// const nweetObject = {
// ...document.data(),
// id: document.id,
// };
// setNweets((prev) => [nweetObject, ...prev]);
// });
// };
const [nweets, setNweets] = useState([]);
useEffect(() => {
dbService
.collection("nweets")
.orderBy("createdAt", "desc")
.onSnapshot((snapshot) => {
const nweetArray = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setNweets(nweetArray);
});
}, []);
return (

<div className="container">
  <NweetFactory userObj={userObj} />
  <div style={{ marginTop: 30 }}>
    {nweets.map((nweet) => (
      <Nweet
        key={nweet.id}
        nweetObj={nweet}
        isOwner={nweet.creatorId === userObj.uid}
      />
    ))}
  </div>
</div>

);
};
export default Home;

로그인이 되면 화면 구성 router
홈에서는 트윗 기능 구현
트윗기능에는 사진 첨부 하여 보낼수 있고 그 사진은 미리보기 구현
트윗은 id가 true면 수정/삭제 기능 구현
userObj를 파라미터로 받아와서 한 객체에서 정보 가져옴

좋은 웹페이지 즐겨찾기