[트위터 클론코딩 챌랜지] 실시간 트윗 적용_15

이번엔 트윗을 실시간으로 적용되어서 화면에 보이게 하는 작업을 할겁니다.

export default function Timeline() {
    const [tweets, setTweet] = useState<ITweet[]>([])
   
    useEffect(() => {
        let unsubscribe : Unsubscribe | null = null;
        const fetchTweets = async () => {
            const tweetsQuery = query(
                collection(db, "tweets"),
                orderBy("createdAt", "desc"),
                limit(25)
            );
                // const snapshot = await getDocs(tweetsQuery);
                // const tweets = snapshot.docs.map((doc) => {
                //     const { photo, tweet, userId, username, createdAt } = doc.data();
                //     return {
                //         id: doc.id,
                //         photo, 
                //         tweet, 
                //         userId, 
                //         username, 
                //         createdAt
                //     }
                // });
            unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => {
                const tweets = snapshot.docs.map((doc) => {
                    const { photo, tweet, userId, username, createdAt } = doc.data();
                    return {
                        id: doc.id,
                        photo,
                        tweet,
                        userId,
                        username,
                        createdAt
                    }
                });
                setTweet(tweets);
            })
        }
        fetchTweets();
        return () => {
            unsubscribe && unsubscribe();
        }
    }, [])

const snpashot ~~~~~ 부분 즉, 데이터를 가공처리하는 부분을 주석처리 해주고 onSnapshot 비동기함수를 만들고 주석처리 내용 중 tweets 부분을 붙여넣어줍니다.
이후 fetchTweets 부분을 모두 useEffect로 옮겨줍니다.

unsubscribe를 만들어줄건데, 이건 사용자가 해당 포인트를 사용하지 않을때 이벤트를 들을 필요가 없기 때문에 해줍니다.
이때, 사용하지 않는다는 것은 로그아웃 상태이거나 다른 화면을 방문중인 상태를 말합니다.
즉, 해당 컴포넌트가 마운트될때 구독하고, 언마운트 될때 구독취소를 한다는 뜻입니다.

그리고 만약 트윗이 아주 많이 대략 100만개 이상 되었다면 이걸 모두 불러오는 것은 비효율적입니다.
그렇기때문에 페이지네이션을 사용하는 것이고, Limit(25)를 사용해 제한해줍니다.