[ Fire Base / ver. 9.14.0 ] 1. Real Time(실시간) 기능

import React, {useEffect, useState} from "react";
import { dbService } from "Fbase";
import { addDoc, collection, onSnapshot, query, orderBy } from "firebase/firestore";
import {Zweet} from "components/Zweet";

export const Home = ({ userObj })=> {
    const [zweet, setZweet] = useState("");
    const [zweets, setZweets] = useState([]);
    useEffect(()=>{
        const q = query(
            collection(dbService, "zweets"),
            orderBy("createdAt","desc")

        );
        onSnapshot(q, (snapshot)=>{
            const zweetArr = snapshot.docs.map((doc)=>({
                id: doc.id,
            ...doc.data(),
            }));
            setZweets(zweetArr);
        });
    },[]);

( dbService = getFirestore , Zweet = "서브밋시 마운트 될 컴포넌트"

userObj = "firebase.auth().onAuthStateChanged 에서 받아온 유저오브젝트" )

 

리액트라우터를 이용할 Router.js 컴포넌트에

 

메인화면 컴포넌트(Home)를 글을 업로드시 실시간기능을 넣는다고 가정했을때

 

위와 같이 유스이팩트를 통해서 쿼리를 만들고 업로드 될 요소의 순서를 지정해준다.

 

createdAt는 시간별로 나올 것이고 desc를 설정하였기 때문에 현재와 가까운

 

시간일수록 위로 업로드 된다.

 

onSnapshot을 사용하여서 본격적으로 실시간 기능을 구현시킨다.

 

onSnapshot은 데이터베이스에 변화가 생겼을 경우 알려주는 리스너 역할이다.

 

map을 통해서 각각 id와 data()의 리터럴을 가진 요소가 실시간으로 업로드 된다.

 

 

const onSubmit = async (event)=> {
    event.preventDefault();
    try{
        const docRef = await addDoc(collection(dbService, "zweets"),{
            text: zweet,
            createdAt: Date.now(),
            creatorId: userObj.uid,
        });
        console.log("Document written with ID: ",docRef);
    } catch (error) {
        console.error("Error adding document: ", error);
    }
    setZweet("");
};

글을 업로드 했을때(submit 했을때) 실행되는 함수이다.

 

서브밋 됐을때 새로고침기능을 없앤 후 async를 사용하여 try와 catch로 성공/실패 했을때

 

지정해둔 함수를 반환하도록 만든다.

 

addDoc기능을 임포트해서 사용했으므로 새로운 Document(문서)를만들어서

 

text, createdAt, creatorId 의 리터럴을 만들어 준다.

 

마지막으로 setZweet을 빈문자열로 만들어줘서 글쓰는 인풋을 초기화 시켜준다.

 

 

const onChange = ({ target: {value} })=> {
    setZweet(value);
}

업로드할 input 내의 리스너를 만들어줘서 즉각 랜더링될 수 있도록 만든다.

 

 

        return (
            <div>
                <form onSubmit={onSubmit}>
                    <input
                        value={zweet}
                        onChange={onChange}
                        type="text"
                        placeholder="What's on your mind?"
                        maxLength={120}
                    />
                    <input type="submit" value="zweet"/>
                </form>
                <div>
                    {zweets.map(zweet => (
                        <Zweet key={zweet.id} zweetObj={zweet}
                        isOwner={zweet.creatorId === userObj.uid }/>
                    ))}
                </div>
            </div>
        );
};

isOwner 속성은 댓글작성자만 글을 삭제할 수 있도록 하기 위해 가져온 속성이다.