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를 파라미터로 받아와서 한 객체에서 정보 가져옴
Author And Source
이 문제에 관하여(React Nwetter - home.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@9bin08/React-Nwetter-home.js-y9ui690s저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)